什麼是替代tref雷特？

我一直在閱讀svg規範。我讀了關於tref -element https://www.w3.org/TR/SVG/single-page.html#text-TRefElement。你們中的大多數人可能會知道tref將會被剝奪。這讓我想知道現在如何做同樣的事情。它不應該太難，但我真的不能在這個話題上找到任何東西。我也很好奇的原因。但那只是一個'有趣的事實'。簡而言之：什麼是替代tref雷特？

tref的另一種選擇是什麼？
爲什麼tref被扣除？

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>

來源

2017-08-10 RMo

將文本內聯。很難實施。 –

@Robert Longson我可以想象，爲更復雜的svg文件單獨放置文本會更容易，因此將來可以更輕鬆地更改文本。這就是說它可能是推翻它的原因之一。 – RMo

沒有什麼能夠阻止你寫這樣工作的SVG生成器。 –

你就可以用JavaScript的一個有點類似的東西。

$("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>

純JS版

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>

來源

2017-08-10 09:17:21

這似乎是一個非常聰明的解決方案，它'替代'舊的行爲。一個沒有jQuery的純js解決方案將更加可重用，更加強悍。我預計會有更明顯的解決方案或替代方案，因爲他們不贊成使用該元素。猜猜我錯了。 Thx爲答案;）。 – RMo

我使用jQuery的任意原因。它也可以輕鬆地用純JS完成。 –

我有同樣的情況，在進一步閱讀中，我測試了以下和它的工作作爲TREF使用上班：

<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>

來源

2017-12-06 23:14:29

當我複製你的例子（並添加一個結束標籤到''）你在JS-Fiddle中的代碼不會顯式輸出任何東西：https://jsfiddle.net/w0Lz6126/ – RMo

我的不好。它正在工作，但x和y值對於視口來說太高^^只需將它們更改爲x = 10和y = 10就可以看到文本。 –

什麼是替代tref雷特？

回答

相關問題