Question

我有一个svg的以下代码：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="470px" height="260px" version="1.1" onload="addEvents()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
    <image xlink:href="baby.jpg" x="0" y="0" height="260px" width="470px">
    </image>
    <g transform="translate(100,50)">
      <circle class="circle" id="tip1" cx="20" cy="0" r="10" stroke="" stroke-width="0" fill="rgb(143, 124, 184)" />
      <g transform="translate(10,15)">
      <polygon class="baby-tip tip1 arrow" points="0,10 10,0, 20,10" style="fill: rgb(143, 124, 184)" />
      </g>
       <rect class="baby-tip tip1" x="0" y="25" height="70" width="220" rx="5" ry="5" style="fill: rgb(143, 124, 184)"/>
  <text class="baby-tip tip1" x="10" y="45">Here is a whole bunch of text.</text>
  <text class="baby-tip tip1" x="10" y="60">Clearly this should wrap, but it</text>
  <text class="baby-tip tip1" x="10" y="75">doesn't. What will we do?</text>
  </g>
  <g transform="translate(150,160)">
      <circle class="circle" id="tip2" cx="20" cy="0" r="10" stroke="" stroke-width="0" fill="rgb(143, 124, 184)" />
      <g transform="translate(10,15)">
      <polygon class="baby-tip tip2 arrow" points="0,10 10,0, 20,10" style="fill: rgb(143, 124, 184)" />
      </g>
       <rect class="baby-tip tip2" x="0" y="25" height="70" width="220" rx="5" ry="5" style="fill: rgb(143, 124, 184)"/>
  <text class="baby-tip tip2" x="10" y="45">Here is a whole bunch of text.</text>
  <text class="baby-tip tip2" x="10" y="60">Clearly this should wrap, but it</text>
  <text class="baby-tip tip2" x="10" y="75">doesn't. What will we do?</text>
  </g>
    <style>
  .baby-tip {
    font-size: 14px;
    font-family: "MuseoSans100", Arial, Helvetica, sans-serif;
    fill: white;
    opacity: 0;
  }
  </style>
<script>

    var log = console.info;
  function addEvents() { 
        var dots = document.getElementsByClassName("circle");

        var i = dots.length;
        while(i--) {
            toggleTips(dots[i]);
        }
}
function closeOtherTips(otherTips) {
    var l = otherTips.length;
    while (l--) {
        otherTips[l].style.opacity = 0;
    }
}
    function toggleTips(dot, l) {

        window.dot = dot;
        dot.addEventListener("click", function() {
            var className = dot.id;
            var tips = document.getElementsByClassName(className);
            var otherTips = document.querySelectorAll('text:not(.' + className + '), rect:not(.' + className + '), polygon:not(.' + className + ')');
            var t = tips.length;
            closeOtherTips(otherTips);
            while (t--) { 
            tips[t].style.opacity != 0 ? tips[t].style.opacity = 0 : tips[t].style.opacity = 1;
        }
      });
  }
  </script>


</svg>

当我将这个内容保存为test.svg，并在浏览器中查看时，它运行得很漂亮 - 我应该看到两个紫色的点，当我点击每个点时，我得到一个小工具提示，只有一个显示在一个时间。

但是，如果我创建以下html文档：

<!DOCTYPE html>
<html>
<body>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<img class="baby-dot-svg" src="test.svg" />
<img class="baby-dot-bg" src="baby.jpg" />
</body>
</html>

两件事改变了： 1）工具提示/所有js功能丢失 - 当我点击点时没有任何反应。 2）baby.jpg的链接不再有效 - 尽管baby.jpg和svg居住在同一目录中，但svg的背景是空白的。

请参阅http://images.agoramedia.com/wte3.0/gcms/web_view_svg_test2.html以查看此操作。

为什么会这样？

Answer 1

有多种方法可以嵌入SVG文件，但<img>方法不允许它进行交互。

尝试：

<object data="test.svg" type="image/svg+xml">
  <img src="baby.jpg" />
</object>

有关详细信息，请see this answer.

为什么我的svg嵌入式javascript在html文档中工作？

1 个答案: