我正在尝试在我的 html 中使用来自外部源的 svg。假设我有这个 svg: https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg
我找到了很多方法来做到这一点,包括:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
但不幸的是,我必须使用的样式适用于 svg 标签。例如,如果我使用这个:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg"/>
</svg>
它不会出现在我的页面上,我只会得到一个空的白色方 block !无论如何我可以在 svg 标签内做到这一点吗?谢谢!
最佳答案
您必须指定 svg 的宽度和高度才能正确显示:
<svg width="90" height="90">
<image xlink:href="your.svg" src="yourfallback.png" width="90" height="90"/>
</svg>
更新
当然你也可以通过 CSS 做到这一点,但你必须确保你的 <image>
如果您不直接指定 html 属性,则标记在您的 CSS 中设置了宽度和高度:
svg {
width: 150px;
height: 150px;
}
image {
width: 100px;
height: 100px;
}
这会将您的实际图像(svg)的大小设置为 100px * 100px
, 但有一个 150px
的“包装器” .关于您对原始问题的评论,也许这就是为什么您看不到图像的原因,因为您没有设置宽度/高度并且只设置适用于包装元素的样式( <svg>
)
示例 fiddle :https://jsfiddle.net/7334vrmq/
希望这对您有所帮助。
关于html - 从 URL 使用 HTML 中的 .svg 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34097191/