Как я могу привязать SVG к объекту?

Google Chrome v60.0.3112.101, HTML5, jQuery 3.2.1

мой object элемент связан с svg-файл. это svg без проблем отображается на моей HTML-странице. Я пытаюсь получить svg элемент с jQuery, но он ничего не нашел для обеих моих попыток:

$('object').length; // 1
$('svg').length; // 0
$('object > svg').length; // 0

это мой кусок HTML:

<object type='text/svg+xml' data='svg/logo.svg'></object>

Как я могу получить мой svg с помощью jQuery?

PS Я использую этот метод (внешний svg-файл) потому что мой svg будет использоваться на многих веб-страницах. Также я использую object вместо img потому что svg использует внешний css-файл.

Источник

1 ответ

Вам нужно использовать contentDocument собственность <object> элемент. Это даст вам объект документа, который является родителем <svg> элемент. Тогда вы можете использовать documentElement свойство объекта документа, чтобы получить корневой элемент документа, который будет <svg> элемент.

var svg = $("object")[0].contentDocument.documentElement;

Чтобы визуализировать это:

#document
   <html>            (HTMLDocument)
      <object>       (HTMLObjectElement)   $("object")[0]
         #document   (HTMLDocument)        .contentDocument
            <svg>    (SVGSVGElement)       .documentElement

Но помните, что SVG не будет доступен, пока страница не загрузится. Так что вам нужно ждать окна onload событие.

$(window).on("load", function() {

  var svg = $("object")[0].contentDocument.documentElement;
  console.log("svg = ",svg);

});
Источник

Вы можете получить доступ к объекту, если добавите идентификатор

<object id="svg" type='text/svg+xml' data='svg/logo.svg'></object>

тогда вы можете запросить идентификатор, подобный этому

$('#svg')
Источник
Другие вопросы по тегам