如何添加svg文本标记从javascript函数返回的值

时间:2015-03-07 23:42:08

标签: javascript text svg

我尝试将一个值添加到从javascript中的函数返回的svg文件的text标签中,如下所示:

<svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<script type="text/javascript"><![CDATA[  
function ShowString(){
return "HelloWorld";
}
]]></script>

<text x="0" y="50" font-family="sans-serif" font-size="50px" fill="red" ><script type="text/javascript"><![CDATA[ShowString();]]></script>
</text>

当我在没有d3.js的情况下打开svg文件时,如何返回文本并查看它。 我想在我创建的同一个文件svg中完成所有操作... 谢谢, 贝尼

1 个答案:

答案 0 :(得分:0)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text id="txt" x="0" y="50" font-family="sans-serif" font-size="50px" fill="red"></text>
  <script type="text/javascript">
    //<![CDATA[
      function ShowString(){
        return "HelloWorld";
      }

      document.getElementById('txt').textContent=ShowString();
    //]]>
  </script>
</svg>

您的第二个脚本标记执行一个返回字符串的函数。但是字符串没有分配给任何东西,所以第二个脚本没有做任何事情。

document.write()甚至不能在那里工作,因为SVG文档没有。