Was ist die Alternative für die deprocated Tref?

Question

Ich habe in Svg Spec ein bisschen gelesen. Ich lese über das tref -Element https://www.w3.org/TR/SVG/single-page.html#text-TRefElement. Die meisten von euch werden wahrscheinlich wissen, dass tref entzogen wird. Das brachte mich dazu, mich zu fragen, wie ich jetzt das Gleiche machen könnte. Es sollte nicht zu schwer sein, aber ich kann wirklich nichts zu dem Thema finden. Ich bin auch neugierig auf die Gründe für die Entfernung der tref. Aber das wäre nur eine "lustige Tatsache". Also kurz:

• Was ist die Alternative für Tref?
• Warum wurde Tref entzogen?

svg

<svg> 
    <defs> 
    <text id="ReferencedText"> 
     Referenced character data 
    </text> 
    </defs> 
    <text x="100" y="200" font-size="45" fill="red" > 
    <tref href="#ReferencedText"/> 
    </text> 
</svg> 

Answer 1

Sie etwas ähnliches mit ein wenig Javascript tun könnte.

$("text[tref]").each(function(index, textElem) { 
 
    $text = $(textElem); 
 
    ref = $text.attr("tref"); 
 
    refText = $(ref).text(); 
 
    $text.text(refText); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <defs> 
 
    <text id="ReferencedText">Referenced character data</text> 
 
    <text id="OtherText">What magic is this?</text> 
 
    </defs> 
 
    <text x="50" y="100" font-size="20" fill="red" tref="#ReferencedText"/> 
 
    <text x="50" y="150" font-size="25" fill="green" tref="#OtherText"/> 
 
</svg>

reine JS Version

var elems = document.querySelectorAll("text[tref]"); 
 
elems.forEach(function(element) { 
 
    tref = element.getAttribute("tref"); 
 
    refText = document.querySelector(tref).textContent; 
 
    element.textContent = refText; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <defs> 
 
    <text id="ReferencedText">Referenced character data</text> 
 
    <text id="OtherText">What magic is this?</text> 
 
    </defs> 
 
    <text x="50" y="100" font-size="20" fill="red" tref="#ReferencedText"/> 
 
    <text x="50" y="150" font-size="25" fill="green" tref="#OtherText"/> 
 
</svg>

Answer 2

hatte ich die gleiche Situation und bei weiterer Lektüre testete ich die folgende und es funktionierte als Tref verwendet zu arbeiten:

<svg> 
    <defs> 
     <text id="Text1">The text to be shown</text> 
    </defs> 


    <use xlink:href="#Text1" x="560" y="850" style="font-family: Arial;fill:#000000; font-size:28px;"> 
</svg>