Question

我正在尝试使用SVG从.txt文件中提取一些文本并显示它。到目前为止，这是我的代码。

<svg width="10cm" height="3cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <text x="100" y="200" font-size="45" fill="red" >
    <tref xlink:href="sensors.txt"/>
  </text>

</svg>

我不明白为什么它不起作用。

Answer 1

如果我没弄错，你的代码就符合规范。

看起来tref元素并不常见（至少在Firefox 17中没有）。在Chrome 23中，虽然它很好地从规范中提供了示例，但它似乎不适用于在外部文件中定义的文本（在纯文本文件和外部svg defs中都没有）。我尝试了绝对和相对链接，包括文件协议。

我想你必须使用像PHP这样的脚本语言插入文本，如果在服务器上，否则会很难。

有关规范中此元素的更多信息：
http://www.w3.org/TR/SVG/text.html#TRefElement
https://developer.mozilla.org/en-US/docs/SVG/Element/tref

Answer 2

要修复非功能性<tref>元素，可以在SVG末尾添加一个脚本，通过Ajax加载所需的文本文件：

<svg width="10cm" height="3cm" viewBox="0 0 1000 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="100" y="200" font-size="45" fill="red" >
    <tref xlink:href="sensors.txt"/>
  </text>
  <script type="text/javascript">
    var trefs = document.getElementsByTagName("tref");
    for (var i=0; trefs[i]; i++) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET",trefs[i].getAttributeNS("http://www.w3.org/1999/xlink","href"),false);
      xhr.send("");
      trefs[i].parentNode.replaceChild(document.createTextNode(xhr.responseText),trefs[i]);
    }
  </script>
</svg>

当然，这仅适用于引用文本文件，就像您一样。这可以通过风格优化，并且如果需要，也可以通过ID（例如xlink:href="#textId'）进行文本引用，即使是来自外部文件的引用ID，例如xlink:href="other.svg#textId"。

我不确定浏览器是否已经支持<tref>所有必需的方面，以便只在必要时才运行脚本。

从.txt文件中提取文本并显示在.svg中

2 个答案: