假设你的HTML中有以下代码:
<img src='example.svg' />
你如何通过JavaScript获取example.svg文件中的内容(即<rect>, <circle>, <ellipse>
等)?
假设你的HTML中有以下代码:
<img src='example.svg' />
你如何通过JavaScript获取example.svg文件中的内容(即<rect>, <circle>, <ellipse>
等)?
无法从img
元素获取引用的SVG的DOM。
如果您使用<object>
、<embed>
或<iframe>
,则可以使用.contentDocument
(首选)来获取引用的svg,或者使用.getSVGDocument
,这可能更兼容旧的svg插件。
这里有一个示例,展示了如何获取引用的svg的DOM。
d3.xml()
函数与jQuery的$.ajax()
和dataType: "xml"
大致相当。<object>
、<embed>
或<iframe>
标签来加载SVG文件,这些标签都允许你获取DOM。 - Erik Dahlströmelement.childNodes
似乎都没有显示任何暴露的SVG DOM。你有例子吗? - nrabinowitz<img>
转换为<svg>
,如此处所述(下面提供了相同的代码),并且你可以在DOM中访问svg的节点。<script type="text/javascript">
$(document).ready(function() {
$('#img').each(function(){
var img = $(this);
var image_uri = img.attr('src');
$.get(image_uri, function(data) {
var svg = $(data).find('svg');
svg.removeAttr('xmlns:a');
img.replaceWith(svg);
}, 'xml');
});
});
</script>
<img id='img' src="my.svg" />
url(data:...)
或仅使用url(*.svg)
背景,您可以使用svg-embed将它们嵌入到DOM中。<?php echo file_get_contents("kiwi.svg"); ?>
.contentDocument
可以访问由<object>
和<iframe>
元素引用的外部 SVG 文件,但无法访问由<embed>
元素引用的文件,而.getSVGDocument()
可以从这三个元素中访问相同的文件。然而,.getSVGDocument()
已被弃用,因此仅在实际需要处理<embed>
元素时才应使用。还要注意,.contentDocument
是一个(非函数)属性,而.getSVGDocument()
是一个方法(因此需要括号)。 - Andrew Willems<img/>
标签的人(例如,如果您无法控制SVG资源),可能想了解有关附加SVG片段标识符的信息,例如"<img src="myimage.svg#svgView(preserveAspectRatio(none))" />
",它允许您像使用内联SVG定义一样控制纵横比、viewBox
等。 - brichins