0

варианты

<script src="..."></script>
<script xlink:href="..." />
<?xml-stylesheet type="text/js" href="..."?>

не работают

1 ответ 1

4

#1. Если нужно подключить JS внутри SVG, то

вы можете либо поместить код скрипта непосредственно в документ, либо ссылаться на внешний файл. При выполнении последнего вы должны использовать (не src) для URI, с атрибутом в xlink пространство имен.

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="/js/mycode.js" />
  <script><![CDATA[
    // Оберните сценарий в CDATA, поскольку SVG - это XML, и вы хотите иметь возможность писать:
    // for (var i=0; i<10; ++i )
    // вместо того, чтобы писать
    // for (var i=0; i&lt;10; ++i )
  ]]></script>
</svg>

#2. Если Вы используете SVG, как часть вашего приложения, то добавляйте внешний скрипт обычным образом в HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

SVG может служить для оформления векторных контуров, добавлять маски, градиенты, clipPath.

Скрипт будет использоваться для нахождения и управления этими элементами.

В примере ниже SVG часть формирует с помощью <mask> фигуру, похожую на бинокль, а jquery отслеживает положение курсора

$(".a").mousemove(function(e) {
  var parentOffset = $(this).parent().offset();
  var relX = (e.pageX - parentOffset.left) - 55;
  var relY = (e.pageY - parentOffset.top) - 30;

  $('mask g').attr('transform', 'translate(' + relX + ',' + relY + ')');
});
.a {
  width: 400px;
  height: 200px;
  background: url('http://cdn.images.express.co.uk/img/dynamic/151/590x/secondary/Planet-Nine-443937.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: inline-block;
}
svg {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <svg x="0px" y="0px" width="400px" height="200px" viewBox="0 0 400 200">
    <mask id="mask">
      <rect width="100%" height="100%" x="0" y="0" fill="white" />
      <g transform="translate(0, 0)">
        <circle cx="30" cy="30" r="30" />
        <circle cx="85" cy="30" r="30" />
      </g>
    </mask>
    <rect x="0" y="0" class="one" mask="url(#mask)" width="400" height="200" />
  </svg>
</div>

1
  • @Artyom Если ответ Вам был полезен, не забудьте отметить его и поставить плюс (рядом с цифрами у ответа) 9 апр 2021 в 13:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.