варианты
<script src="..."></script>
<script xlink:href="..." />
<?xml-stylesheet type="text/js" href="..."?>
не работают
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу#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<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>