Question

我想创建一个SVG文件，它本身就有一个由Javascript控制的动画。我们假设我必须使用Javascript，而不是the fancy-pants SVG animation tools。这很好用;一个黑色圆圈围绕我的窗口左上角移动：

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="400px" height="400px"
    >
  <circle id="c" cx="50px" cy="50px" r="20px" />
  <script>
    var c = document.getElementById('c');
    function f() {
      c.setAttribute('cx', 50 + 30 * Math.random());
      c.setAttribute('cy', 50 + 30 * Math.random());
    }
    setInterval(f, 1000);
  </script>
</svg>

现在，我想将SVG添加到几个网页中。我们试试吧：

<html>
  <head>
    <title>Test a scripted SVG in an &lt;img&gt; tag
  </head>

  <body>
    <img src="test.svg" />
  </body>
</html>

结果是一个不会移动的黑色圆圈。

我做错了什么？或在哪里说我不能这样做？

Answer 1

<script>元素在SVG文件中有效，但在SVG文件显示为图像时无论是通过<img>元素还是作为CSS背景图像。如果您希望脚本有效，请将<img>替换为<iframe>或<object>元素。

基本上，SVG在图像上下文中使用时会模拟光栅图像。光栅图像不是可编写脚本的，因此当以这种方式使用时，SVG也不是。

Answer 2

我已经这样做了，它对我有用。

但我认为应该有神秘的//<!\[CDATA\[内容：

<?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="200"
       height="200"
       zoomAndPan="disable"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xml:space="preserve">
    <!-- Script linked from the outside-->
    <script xlink:href="linked_script.js" />
    <script>
      //<![CDATA[
        alert("ble");
      ]]>
    </script>
  </svg>

这是我embed的文件（按预期方式alert）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Svg embeding test</title>
  </head>
  <body>
    <embed src="test.svg" type="image/svg+xml" /> 
  </body>
</html>

Answer 3

继Robert Longson回答：在我的情况下，我不得不{。1}} .svg因为我的CMS（joomla）不允许我将src属性放入object标签并且也有效。

此外，您必须确保服务器上允许使用MIME类型image / svg + xml。

<script>元素是否在SVG文件内部工作？在HTML文件中？</script>

3 个答案: