Задать вопрос
@Enmergal
javascript

Как работать с svg-файлами при помощи JS?

Имеется веб-страница, на которую загружен svg-файл. Необходимо дать пользователю возможность с этим файлом взаимодействовать.

Собственно, сам код. «obj» — ID объекта внутри svg-файла, с которым и требуется «общаться».
<object data="file.svg" type="image/svg+xml" id="file" onload="on_load()"></object>

function on_load() {
    var svgDoc = document.getElementById("file");
    var svg = svgDoc.contentDocument;
    
    obj = svg.getElementById("obj");

    alert("Loaded");
    obj.onclick = alert("Clicked");
}

Первый alert выполняется, любые же попытки как-либо обратиться к obj завершаются провалом.
  • Вопрос задан
  • 3431 просмотр
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.
Господи, невнимательно смотрел.

У вас obj.onclick = alert(123);
То есть obj.onclick будет равен тому, что вернет функция alert()

А должно быть так:
obj.onclick = function(){
alert(123)
}


Вот полный код, попробуйте:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var svgDoc = document.getElementById("file");
            svgDoc.addEventListener('load', function () {
                var svg = svgDoc.contentDocument;

                var obj = svg.getElementById("obj");

                alert("Loaded");

                obj.addEventListener('click', function () {
                    alert("Clicked");
                });
            });
        });
    </script>
</head>
<body>
<object id="file" data="test.svg" type="image/svg+xml"></object>
</body>
</html>
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 2
trushka
@trushka
Чтоб взаимодействовать, лучше iframe, а не object использовать.
Ответ написан
1 комментарий
1 комментарий
@Enmergal Автор вопроса
Покажите file.svg

Пожалуйста:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="200"
   height="200"
   viewBox="0 0 200 200"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="file.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4"
     inkscape:cx="73.898371"
     inkscape:cy="80.549681"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1366"
     inkscape:window-height="705"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-852.36216)">
    <rect
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.704;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="obj"
       width="80"
       height="80"
       x="0"
       y="972.36212"
       inkscape:label="" />
  </g>
</svg>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Внести правки по сайту на Wordpress
01 мая 2024, в 08:16
10000 руб./за проект
Интеграция Битрикс в наше FastAPI приложение
01 мая 2024, в 02:11
5000 руб./за проект
Правки в макет Figma
01 мая 2024, в 00:29
2000 руб./за проект
Ещё заказы