是否可以在 SVG 中使用 Snap？

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>

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

Answer 1

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

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

Answer 2

<svg> 元素中的 <script> 标签来自 SVG 命名空间，并使用 href 属性（如果您遵守 SVG 1.1，则使用 xlink:href ）而不是src。此外，正如 johnheroy 所说，请注意为每个脚本使用单独的元素。

<svg id="robot" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...>
<script xlink:href="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js" />
<!-- grafic content -->
<script>
var s = Snap("#robot");
//...
</script>
</svg>

是否可以在 SVG 中使用 Snap？

Is it possible to use Snap inside an SVG?

javascript

svg

snap.svg