为啥 SVG 视图框属性仅适用于内联 SVG?
Posted
技术标签:
【中文标题】为啥 SVG 视图框属性仅适用于内联 SVG?【英文标题】:Why does SVG viewbox attribute only work on inline SVG?为什么 SVG 视图框属性仅适用于内联 SVG? 【发布时间】:2017-04-12 08:39:34 【问题描述】:我下载了一些 16x16 SVG 图标,它们使用 viewbox 属性来缩放原始代码以适应下载时的 16x16 画布。现在我遇到的是,我无法在任何地方从外部文件插入 SVG,因为 viewbox 属性不起作用。如果我将 SVG 代码内联,那么它就可以工作。
是我遗漏了什么吗,还是只是这样?
这是代码。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewbox="0 0 48 48" >
<path clip-rule="evenodd" d="M37,47H11c-2.209,0-4-1.791-4-4V5c0-2.209,1.791-4,4-4h18.973
c0.002,0,0.005,0,0.007,0h0.02H30c0.32,0,0.593,0.161,0.776,0.395l9.829,9.829C40.84,11.407,41,11.68,41,12l0,0v0.021
c0,0.002,0,0.003,0,0.005V43C41,45.209,39.209,47,37,47z M31,4.381V11h6.619L31,4.381z M39,13h-9c-0.553,0-1-0.448-1-1V3H11
C9.896,3,9,3.896,9,5v38c0,1.104,0.896,2,2,2h26c1.104,0,2-0.896,2-2V13z M33,39H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18
c0.553,0,1,0.448,1,1C34,38.553,33.553,39,33,39z M33,31H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1
C34,30.553,33.553,31,33,31z M33,23H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1C34,22.553,33.553,23,33,23 z"
fill-rule="evenodd"/>
</svg>
【问题讨论】:
外部 SVG 具有内联 SVG 没有的要求。例如xmlns
属性,以及浏览器同源限制。如果没有有关您如何加载 SVG 及其内容的更多信息,我们无法为您提供真正的帮助。
还要注意,该属性称为 viewBox 而不是 viewbox。对于内联来说,这种区别并不重要,对于独立来说,它确实如此。
我已经更新了帖子并添加了代码。 update:我按照 Robert 的建议将 viewbox 更改为 viewBox,现在如果我嵌入外部文件,它就可以工作了。谢谢。
【参考方案1】:
请注意,它是 viewBox
而不是 viewbox
- 浏览器有时可能会拯救您,但并非总是如此。
有关完整详细信息,请参阅以下内容: https://jsfiddle.net/t88pLgbb/4/
【讨论】:
您也应该在答案中添加代码 sn-ps :)以上是关于为啥 SVG 视图框属性仅适用于内联 SVG?的主要内容,如果未能解决你的问题,请参考以下文章
css 在SVG文件中,确保没有内联填充颜色以确保其有效。适用于所有浏览器
css 在SVG文件中,确保没有内联填充颜色以确保其有效。适用于所有浏览器
css 在SVG文件中,确保没有内联填充颜色以确保其有效。适用于所有浏览器