使用超文本标记语言的.svg文件？
使用超文本标记语言的.svg文件？
提问于 2015-12-05 04:49:27
我正尝试在我的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>它不会显示在我的页面上，我只得到一个空白的白色方块！有没有什么办法可以在svg标记中做到这一点？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-12-05 05:08:02
您必须指定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>)的样式。
示例小提琴：https://jsfiddle.net/7334vrmq/
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34097191
复制相关文章
相似问题
腾讯云开发者
