@illiario
безработный

Как вызвать js из svg?

Есть три файла:
pic.svg
все прекрасно отображается, но хочется интерактива. Добавил в svg-файл обработчик onclick на элемент прямоугольник:
<rect
       style="opacity:1;fill:#008000;stroke-width:0.26458332"
       id="rect1"
       width="10"
       height="10"
       x="2"
       y="272"
       ry="0.015"
       onclick="msg()" />


Далее, в html подключается js файл и помещается svg. Вот так:
<html>
<head>
<title>SVG</title>
<script type="text/javascript" src="svg.js"> </script>
</head>
<body>
	<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>	
</body>
</html>

JS тривиальный:
// Javascript
function msg(){	
	alert('Success');	
}


Так вот. При нажатии на прямоугольник должно выскакивать окно. Не выскакивает. Браузер (IE, Mozilla, Chrome) не знает о функции, не видит ее. Выдается "msg is not defined"
Причем, если скопировать svg в html, все работает на отлично. Как добиться работоспособности?
  • Вопрос задан
  • 2306 просмотров
Решения вопроса 1
DenVdmj
@DenVdmj
Javascript, Perl, Lua, etc.
Подключайте скрипт не в html-, а в svg-файле:

<svg width="100" height="100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <script xlink:href="svg.js" />

  <rect fill="#080" width="100" height="100" onclick="msg()" />

</svg>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kazasoft
Чтобы расширить область видимости из объекта, как в вашем примере, необходимо указать что вызываемая функция находится вне SVG.
style="opacity:1;fill:#008000;stroke-width:0.26458332"
id="rect1"
width="10"
height="10"
x="2"
y="272"
ry="0.015"
onclick="top.msg()" />
А так все тоже самое
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы