Question

我一直在阅读svg spec。我读到了tref - 元素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>

Answer 1

我有同样的情况，经过进一步的阅读，我测试了以下内容，它起到了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>

Answer 2

你可以用一点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>

掠夺的特雷弗的替代方案是什么？

2 个答案: