Question

在标记为重复项之前，请正确理解此问题。

StackOverflow 中有很多类似的问题，但是我的问题与这些问题略有不同。

我有一个 chakra.svg 文件，其代码是这样的：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" id="b">
    <circle cx="50" cy="50" r="45" stroke-width="2" stroke="blue" fill="none"/>
    <script>
        <![CDATA[
            for(i=0;i<24;i++)
            {
                var l=document.createElementNS("http://www.w3.org/2000/svg","line");
                l.setAttributeNS(null,"x1","50");
                l.setAttributeNS(null,"y1","50");
                l.setAttributeNS(null,"x2","5");
                l.setAttributeNS(null,"y2","50");
                l.setAttributeNS(null,"stroke-width",2);
                l.setAttributeNS(null,"stroke","blue");
                l.setAttributeNS(null,"transform","rotate("+(i/24*360)+",50,50)");
                document.querySelector("#b").appendChild(l);
            }
        ]]>
    </script>
</svg>

输出将按预期呈现，如下所示：

我还有另一个文件， India_flag.svg ，其代码是这样的：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="170" height="100">
    <rect x="0" y="0" height="33" width="180" fill="#f93"/>
    <rect x="0" y="33" height="34" width="180" fill="white"/>
    <rect x="0" y="67" height="33" width="180" fill="green"/>
</svg>

此文件的输出也按预期方式呈现：

但是，现在的问题是，当我尝试使用 image将 chakra.svg 文件插入 India_flag.svg 文件中时 这样的标签：

<image xlink:href="chakra.svg" x="70" y="35" height="30" width="30"/>

输出应该是将轮子放置在标志的中心，但是我得到了以下输出：

呈现了 chakra.svg 文件，但是该文件中的JavaScript代码未运行，仅呈现了圆圈。我在做错什么以及如何实现自己的目标？

Answer 1

在加载到<image>标记（或HTML <img>）中的SVG文档被沙盒化，将不允许执行脚本，也不会是交互式的（即，没有用户-事件）。

要避免这种情况，您需要另一种方式来添加svg。一种简单的解决方案是将其标记直接复制到主要标记中：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="170" height="100">
  <rect x="0" y="0" height="33" width="180" fill="#f93"/>
  <rect x="0" y="33" height="34" width="180" fill="white"/>
  <rect x="0" y="67" height="33" width="180" fill="green"/>
  <svg x="70" y="35" height="30" width="30" id="b" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" stroke-width="2" stroke="blue" fill="none"/>
    <script>
      <![CDATA[
        for(i=0;i<24;i++) {
          var l=document.createElementNS("http://www.w3.org/2000/svg","line");
          l.setAttribute("x1","50");
          l.setAttribute("y1","50");
          l.setAttribute("x2","5");
          l.setAttribute("y2","50");
          l.setAttribute("stroke-width",2);
          l.setAttribute("stroke","blue");
          l.setAttribute("transform","rotate("+(i/24*360)+",50,50)");
          document.querySelector("#b").appendChild(l);
        }
      ]]>
    </script>
  </svg>
</svg>

另一种解决方法是做相反的事情：使用脚本plnkr从一个标志图像中加载您的标志图像。

如何将SVG包含在具有JavaScript代码的SVG文档中？

1 个答案: