Можно ли использовать Snap внутри SVG? - PullRequest
Новая
       37

Можно ли использовать Snap внутри SVG?

0 голосов
/ 01 января 2019

Я следую учебному пособию по адресу https://css -tricks.com / video-screencasts / 135-three-way-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?

Ответы [ 2 ]

0 голосов
/ 01 января 2019
Тег

A <script> внутри элемента <svg> взят из пространства имен SVG и использует атрибут href (или xlink:href, если вы придерживаетесь SVG 1.1) вместо src.Кроме того, как сказал Джонхерой, позаботьтесь об использовании отдельных элементов для каждого сценария. 

<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>
0 голосов
/ 01 января 2019

Вам необходимо импортировать библиотеку 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>
...