是否可以在 SVG 中使用 Snap？答案

【问题标题】：Is it possible to use Snap inside an SVG?是否可以在 SVG 中使用 Snap？
【发布时间】：2019-05-28 06:17:00
【问题描述】：

我正在关注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 以某种方式加载它？

【问题讨论】：

标签： javascript svg snap.svg

【解决方案1】：

<svg> 元素内的 <script> 标记来自 SVG 命名空间，并使用 href 属性（或 xlink:href，如果您遵守 SVG 1.1）而不是 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>

【讨论】：

我也按照您的建议进行了尝试，但仍然无法正常工作。这是我尝试过的代码jsfiddle.net/tzuya/3dfvtq4y/1
将脚本放在文档末尾。在解析时，所选元素尚不存在。（颜色动画中仍然存在错误'rgb(0, 128, 0)' is not a valid selector，但我无法帮助您。）

【解决方案2】：

您需要将 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>

【讨论】：