Как внутри svg подключить внешний скрипт?

260
09 мая 2022, 17:00

варианты

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

не работают

Answer 1

#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>

READ ALSO
Поиск по сообщениям discord.js

Поиск по сообщениям discord.js

Как я могу осуществить поиск сообщений по отдельному содержанию, в отдельном канале? Возможно ли это вообще? JavaScript

256
открытые сабменю по клику

открытые сабменю по клику

Есть две части меню, по клику на которые должно открываться соответствующее сабменюУ меня открываются оба сабменю

165
Зона влияния города. Игра [дубликат]

Зона влияния города. Игра [дубликат]

Римейк вопроса, который участники, возмущенные отсутствием моих вариантов решение - закрыли

207
Неправильный вывод чисел

Неправильный вывод чисел

с помощью js нужно найти все натуральные числа из промежутка от 1 до 200, у которых количество делителей равно N, N вводим сами

170