Как вставить SVG-файл через JavaScript / jQuery?

Question

$.get('path/to/svg.svg', function(data) {
  $('#my-div').html(data);
});

Это приводит к "HIERARCHY_REQUEST_ERR: DOM Exception 3" в консоли.Все варианты этой концепции, кажется, делают то же самое.Если я копирую и вставляю свой фактический SVG и заменяю им «данные», он вставляется просто отлично.Нужно ли форматировать файл .svg по-другому или сначала каким-то образом его проанализировать, чтобы браузер не думал, что я пытаюсь вставить другой документ в свой документ?

Answer 1

В любом случае вы можете перезагрузить изображение в <div>:

$('#my-div').css('background-image', "path/to/svg.svg");

Answer 2

попробуйте просмотреть дочерние элементы возвращаемых данных. В моем случае первым дочерним элементом был узел XML, вторым - объявление DOCTYPE, а третьим дочерним элементом был тег SVG, который можно добавить с помощью метода .html (). Однако изображение SVG по-прежнему не отображается, пока я не переключу некоторые стили на контейнере в инструментах разработчика (используя Chrome). Прочь, чтобы заняться поиском. Если я найду что-нибудь полезное, я добавлю это в комментарии к этой записи.

Answer 3

Использовать jQuery SVG: http://keith -wood.name / svg.html