Question

我正在按照https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/上的教程进行操作，并且尝试将所有内容都放入svg中，但js部分使用Snap却无法正常工作。

我尝试过

<svg version="1.1" id="robot" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 127.9 178.4" enable-background="new 0 0 127.9 178.4" xml:space="preserve">

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js">

var s = Snap("#robot");

var leftPupil = s.select("#left-pupil");

leftPupil.attr({
  fill: "green"
});

leftPupil.animate({
  r: 50,
  fill: "lightgreen"
}, 1000);

</script>
</svg>

，但控制台显示未定义快照。是否可以仅使用SVG以某种方式加载它？

Answer 1

<script>元素内的<svg>标签来自SVG命名空间，并使用href属性（如果遵循SVG 1.1，则使用xlink:href）而不是{{ 1}}。另外，就像johnheroy所说的那样，请小心为每个脚本使用单独的元素。

src

Answer 2

您需要在一个单独的<script>标签中导入SnapSVG库，该标签与您定义自己的代码的标签相同。因此，请尝试关闭第一个<script>标签，然后为您的代码打开一个新标签，即：

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script>
    // your JS code
</script>

是否可以在SVG内部使用Snap？

2 个答案: