什么是替代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雷特？

回答

相关问题