嵌入式的嵌入式svg在镀铬中没有空白 [英] scale embedded svg without white space in chrome
问题描述
我需要将一个svg嵌入到html中，并以一种快速响应的方式进行设计。对于普通的图片，这对我来说很好：
img {
最大宽度：100％;
}
img [height] {
height：auto; / *如果< img>标签提供宽度保持高宽比* /
}
不幸的是，这不适用于嵌入式SVG。下面是一个示例，它是如何在img标签中嵌入svg和svg的。
这是一个标记示例：
< div>嵌入式SVG：
< svg xmlns =http://www.w3.org/2000/svgwidth =300px height =300pxviewBox =0 0 100 100preserveAspectRatio =xMidYMid meet>< circle cx =50cy =50r =50/>< / svg>
< / div>
将DIV> SVG作为图像标记：
将IMG SRC = 数据：图像/ SVG + xml的; BASE64，PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIzMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiAvPjwvc3ZnPg0K/>
< / div>
和css：
div {
resize：both;
大纲：1px纯红色;
margin-bottom：3em;
填充：1em;
}
svg，
img {
display：block;
大纲：1px纯蓝色;
最大宽度：100％;
height：auto;
}
按比例缩小这两张图片可以保留它们的比例，但嵌入的svg会保持其原始高度（蓝色轮廓）
如何避免嵌入式svg创建空白区域？
您可以在 jsfiddle 上找到示例。
我很乐意发布截图，但是我没有足够的声誉：/ b / b
$ b
编辑：在铬。相应地改变了标题
这在技术上不是Chrome的bug，而是 SVG规范。特别是：
blockquote
同样，如果在引用元素或最外层的svg元素上指定了足以建立高度的定位属性然后这些定位属性建立视口的高度;否则，最外面的svg元素的'height'属性会建立视口的高度。
告诉浏览器使用< svg> 的高度属性作为高度，除非存在冲突的CSS样式设置不同的高度，无论考虑图像的高宽比。现在，如果< svg>
但规范从未明确表示过。 Firefox虽然这样解释，但Chrome并没有。
非直观的解决方案是从< svg> 中删除高度和宽度属性，元素，使用 viewBox 属性建立宽高比，并使用CSS指定最小和最大高度和宽度。
< div>
嵌入式SVG：
< svg xmlns =http://www.w3.org/2000/svgviewBox =0 0 100 100
preserveAspectRatio =xMidYMid meet> ;
< circle cx =50cy =50r =50/>
< / svg>
< / div>
CSS：
svg，
img {
display：block;
大纲：1px纯蓝色;
width：300px;
最大宽度：100％;
最大高度：300px;
height：auto;
}
请注意，高度：auto; style是必需的，因为默认的高度样式是 100％，如果您没有将其指定为属性。
所有这些都比我之前使用的方法更简单，其中涉及将SVG封装在< div> 中，并使用填充来定义固定宽高比。
I need to embed an svg into html and style it in a responsive way. For regular images this worked nicely for me:
img {
max-width: 100%;
}
img[height] {
height: auto; /* if the <img> tag provides a width keep aspect ratio */
}
unfortunately this doesn't work for embedded svgs. Here is an example how it works for both an embedded svg and a svg within an img tag.
Here is an example markup:
<div>Embedded SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><circle cx="50" cy="50" r="50" /></svg>
</div>
<div>SVG as image tag:
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIzMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiAvPjwvc3ZnPg0K" />
</div>
and css:
div {
resize: both;
outline: 1px solid red;
margin-bottom: 3em;
padding: 1em;
}
svg,
img {
display: block;
outline: 1px solid blue;
max-width: 100%;
height: auto;
}
scaled down both images preserve aspect their ratio but the embedded svg keeps its original height (the blue outline)
How can I avoid the embedded svg creating a white space?
You can find an example on jsfiddle.
I'd love to post screenshots but I have not enough reputation for that :/
Edit: the bug appears only in chrome. changed the title accordingly
This isn't technically a Chrome bug, but rather a gap in the SVG specifications. In particular:
Similarly, if there are positioning properties specified on the referencing element or on the outermost svg element that are sufficient to establish the height of the viewport, then these positioning properties establish the viewport's height; otherwise, the ‘height’ attribute on the outermost svg element establishes the viewport's height.
That tells the browser to use the <svg>'s height attribute as the height, unless there is conflicting CSS styles setting a different height, regardless of any consideration of the aspect ratio of the image. Now, most of us would argue that
- if there is enough information on the
<svg>to establish an intrinsic aspect ratio, - then any CSS that explicitly defines the width should be considered "positioning properties ... sufficient to establish the height of the viewport".
But the specs never explicitly say that. And while Firefox interprets it that way, Chrome does not.
The non-intuitive solution is to remove the height and width attributes from the <svg> element, use the viewBox attribute to establish the aspect ratio, and use CSS to specify min and max height and width.
<div>
Embedded SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
CSS:
svg,
img {
display: block;
outline: 1px solid blue;
width:300px;
max-width: 100%;
max-height:300px;
height: auto;
}
Note that the height:auto; style is required, because the default height style is 100% when you don't specify it as an attribute.
All of which is way simpler than the method I'd been using previously, that involved wrapping the SVG in a <div> and defining a fixed aspect ratio using padding.
这篇关于嵌入式的嵌入式svg在镀铬中没有空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
