@flabot

Как получить svg из object?

Здравствуйте, делаю простую раскраску на сайт, решил выбрать svg, но встал на самом старте, т.к не могу получить доступ к DOM svg'шки, не понимаю до конца в чём проблема.

SVG'шка
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="258.5" cy="232.3" r="156"/>
<circle class="st0" cx="202.8" cy="191.3" r="51.9"/>
<circle class="st0" cx="203.6" cy="211.4" r="31.9"/>
<path class="st0" d="M192.7,314.2c0,0,81.3,47.2,154.8,0C347.5,314.2,289.5,342.9,192.7,314.2z"/>
<circle class="st1" cx="226.6" cy="188.4" r="8.9"/>
<circle class="st1" cx="235" cy="203.5" r="6.7"/>
<circle class="st0" cx="331.3" cy="191.3" r="51.9"/>
<circle class="st0" cx="332.1" cy="211.4" r="31.9"/>
<circle class="st1" cx="355.1" cy="188.4" r="8.9"/>
<circle class="st1" cx="363.5" cy="203.5" r="6.7"/>
</svg>


Подскажите, как лучше реализовать? Остановился на моменте с получением самой svg
<object
 	id="holst"
  	type="image/svg+xml"
  	data="picture.svg">
</object>


let html_get = document.querySelector("#holst");
let picture = html_get.contentDocument;
console.log(picture);

Но по итогу получаю это: 60a358978a665633075779.png
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 1
RAX7
@RAX7
const objectEl = document.querySelector("#holst");
const svgEl = objectEl.getSVGDocument().rootElement;
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы