Вставить SVG-файл в SVG-документ, получить доступ к его объектам через JavaScript - PullRequest
Новая
       0

Вставить SVG-файл в SVG-документ, получить доступ к его объектам через JavaScript

0 голосов
/ 05 марта 2019

Я ищу способ загрузки содержимого svg из внешнего файла, в элемент-заполнитель и, когда он загружен, доступ к его объектам для манипулирования / модификации.

Примерно так: 

Host file:

<body>
<svg width="700" height="500">
  <rect x="10" y="10" height="480" width="680" fill="red"/>
  <g id="placeholder"></g>
</svg>
</body>

drawing.svg file:

<svg>
  <circle id="obj1" cx="300" y="250" r="100" fill="blue"/>
</svg>

И вот некоторый псевдокод: 

var placeholder = document.getElementById("placeholder");
loadSVGFile("drawing.svg", placeholder, function(svg) {
  // Callback called when the file has loaded
  var obj = svg.document.getElementById("obj1");
  obj.setAttribute("fill", "black");
});

В настоящее время я создаю в памяти новый элемент <object>, загружаю файл svg, подключаю обработчик события onload, который копирует документсодержимое целевого элемента-заполнителя с помощью рекурсивного сканера узлов.Не красиво, но это работает.Я надеюсь, что есть лучший способ.

1 Ответ

0 голосов
/ 05 марта 2019

Что-то вроде следующего должно работать.Я не проверил это должным образом.Но это урезанная версия какого-то другого кода, поэтому он должен быть как минимум очень близок. 

function loadSVGFile(svgURL, placeholderElem, callbackFn) {
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4 && xhr.status == 200) {
       var svg = xhr.responseXML.getElementsByTagName('svg')[0];
       placeholderElem.parentElement.replaceChild(svg, placeholderElem); // Replace the placeholder node
       //targetNode.appendChild(svg); // Insert into the placeholder node 
       if (callbackFn) {
         callbackFn(svg);
       }
     }
   }
   xhr.open('GET', svgURL, true);
   xhr.send(null);
}            

var placeholder = document.getElementById("placeholder");

loadSVGFile("drawing.svg", placeholder, function(svg) {
  // Callback called when the file has loaded
  var obj = svg.ownerDocument.getElementById("obj1");
  obj.setAttribute("fill", "black");
});
<body>
<svg width="700" height="500">
  <rect x="10" y="10" height="480" width="680" fill="red"/>
  <g id="placeholder"></g>
</svg>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...