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

Question

[Данил]

Здравствуйте, делаю простую раскраску на сайт, решил выбрать 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);

Но по итогу получаю это:

Comments

[Данил]

Если обращаюсь следующим образом:

let svg_get = document.querySelector("#holst");
console.log(svg_get);

То документ отдаётся следующим образом

[Ankhena]

Что мешает вставлять svg как svg?

[Данил]

Ankhena, Имеется ввиду полностью в файл? Я уже так и сделал, буду роутами подгружать другие svg'шки, по всей видимости без костылей не получить :(

Answer 1

[RAX7]

const objectEl = document.querySelector("#holst");
const svgEl = objectEl.getSVGDocument().rootElement;

Comments

[Максим]

салам ! я либо делаю что то не так либо х.з что надо https://codepen.io/topicstarter/pen/OJpREBX

[RAX7]

Максим Ленский,
во первых:

- objectEl.load
+ objectEl.onload

а во вторых: по всей видимости svg файл должен отдаваться с того же домена что и сам документ
https://replit.com/@RAX7/SVGobject

[Максим]

RAX7, на том домене все заголовки настроены на стороне php ... про onload щас проверю, короче не работает ..да и х.. с ним