如何使用javascript / html從SVG文件插入對象？

Question

我有一個SVG文件，在一層上有很多不同的對象。 無論如何，無需先將對象拆分成自己的文件，就可以在網頁上顯示該文件中的特定對象？

Answer 1

當然。 在SVG代碼中為對象提供ID或class 。 然后您可以通過隱藏objects

.mySvgObjectClass { 
    visibility: hidden
}

或用Javascript

document.querySelector('.mySvgObjectClass').style.visibility = 'hidden';

或在jQuery中：

$('.mySvgObjectClass').css('visibility', 'hidden');

Answer 2

這是use元素的完美用例...

https://developer.mozilla.org/en/docs/Web/SVG/Element/use ：

<use>元素從SVG文檔中獲取節點，並將其復制到其他位置。 效果與將節點深度克隆到未公開的DOM中，然后粘貼到use元素所在的位置相同。

---

https://css-tricks.com/svg-use-with-external-reference-take-2/解釋了如何將其用於SVG圖標系統，該系統將所有圖標組合為一個SVG。 可能適應您的使用，或者至少對它的工作原理有更多的了解。