Question

所以魔鬼在这个问题的细节中。

我想创建一些带有封装行为的svg组件（因此我想在外部svg文件中包含一个脚本标记）。现在，当你包含via object或embed等时，这可以从HTML5中正常工作。但是我想从svg标签中引用这些svg文件（在svg元素中）。

因此，从svg中，我知道包含svg文件（通过xlink：href）的唯一方法是使用图像标记或使用标记。但是，它们都不会在其内容模型中接受脚本标记，我假设是脚本标记未被解释的原因（并且我非常确定它们没有被解释）。我正在svgs中转发CData格式的脚本，所以我不认为这是一个解析问题。

这是我的意思的简短例子。

Html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div id"top">
      <svg id="map" viewBox = "0 0 500 500" version = "1.1" width="250" height="250"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="110" width="100" height="100" xlink:href="svg/obj/example.svg" />
      </svg>
    </div>
  </body>
</html>

和svg / obj / example.svg：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg viewBox = "0 0 500 500" version = "1.1" width="250" height="250"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <script type="application/ecmascript"> <![CDATA[
    function circle_click(evt) {
      var circle = evt.target;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 100)
        circle.setAttribute("r", currentRadius*2);
      else
        circle.setAttribute("r", currentRadius*0.5);
    }
  ]]> </script>

  <circle cx="200" cy="200" r="100" fill="yellow" stroke="black" stroke-width="3" onclick="circle_click(evt)" onactivate="circle_click(evt)" mouseover="circle_click()"/>

</svg>

为了消除解析错误的可能性，我从W3C示例（iir）剪切并粘贴上述脚本。我已经尝试过很多关于这个主题的变体，但似乎无法让它发挥作用。具体内容充分混淆，搜索只会带来不同的用例。希望有人可以带我摆脱痛苦;）。

在svg

0 个答案: