1

我正在尝试使用 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>

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

4

2 回答 2

1

如果我没记错的话，您的代码与规范相对应。

看起来trefelement 并不常见（至少在 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

于 2013-01-06T02:42:07.500 回答
1

要修复非功能性<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>以便仅在必要时运行脚本。

于 2013-01-06T22:26:15.930 回答