如何在HTML中繪製SVG

美好的一天，如何在HTML中繪製SVG

我正在玩SVG，當時我注意到了這種行爲。

背景：我正在使用snap.svg加載SVG。我想替換的節點位於組<g>節點內。

我使用document.getElementById選擇了一個SVG節點。然後我得到了父母。然後，我用另一組SVG文本替換父項的textContent屬性。但是，新的SVG不可見。

我在谷歌瀏覽器中打開了開發者工具。我在節點樹視圖中選擇了同一個節點。我將節點編輯爲HTML，將所有SVG節點替換爲新的SVG文本。但是，新的SVG不可見。

最後，我選擇了根元素，即SVG標籤本身。然後將SVG標籤編輯爲HTML，並將SVG文本附加爲最後一個子元素。現在新的SVG是可見的？

是否有我應該注意的SVG繪圖規則？我已經閱讀過其他問題，很難/不可能用SVG文本替換HTML，可以使用node.innerHTML替換HTML。

來源

2014-01-27 user513788

想知道，如果您使用Snap來加載SVG，爲什麼不使用Snap來操縱SVG呢？ – Ian

如果您以編程方式操作SVG，則捕捉效果很好。不過，我想添加的SVG是一個字符串。我還沒有看到Snap的一種方法，它可以讀取一個字符串，並將它變成一個完整的節點和東西樹。 – user513788

Snap的解析方法如何，所以http://snapsvg.io/docs/#Snap.parse然後你只需將它追加到任何你想要的其他svg。以下是使用它添加標題http://svg.dabbles.info/snaptut-title.html的示例。我懷疑，如果你有一個具體的例子，可能會提出一個更具體的答案。 – Ian

您應該嘗試創建具有名稱空間識別createElementNS API的SVG元素。有關示例，請參閱http://www.kevlindev.com/tutorials/basics/shapes/js_dom/

來源

2014-01-27 10:12:11 jacquard

您是否看過使用由Snap.svg提供的Element.innerSVG？

此外，Element.innerHTML也應該在svg元素上工作，並且它已經在某些瀏覽器（例如Opera和Chrome的新版本，請參閱here）中起作用。這在DOM Parsing spec中定義。

來源

2014-01-27 12:20:22

如何在HTML中繪製SVG

回答

相關問題