如何在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

回答

相关问题