2013-01-06 112 views
1

我想要一个SVG从.txt文件中拉出一些文本并显示它。 这是我的代码到目前为止。从.txt文件中提取文本并在.svg中显示

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

我不明白为什么它不工作。

回答

1

要修复您的非功能性<tref>元素,你可以添加脚本是通过Ajax加载所需的文本文件中的SVG的结尾:

<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>的所有需要​​的方面,以便在必要时运行脚本。

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

+2

[此错误](https://bugzilla.mozilla.org/show_bug.cgi?id=273171)跟踪Firefox的状态(当前未实施)。 –

相关问题