SVG 无法在 IE 中正确缩放 - 有额外的空间
Posted
技术标签:
【中文标题】SVG 无法在 IE 中正确缩放 - 有额外的空间【英文标题】:SVGs not scaling properly in IE - has extra space 【发布时间】:2018-10-03 04:54:47 【问题描述】:我决定为我的一个项目改用 svg 符号 - 但需要它们响应式。主要思想是不要有多个http请求,所以我正在考虑将所有SVG合并到一个SVG中,定义符号并使用它们如下:
<svg style="display:none;">
<defs>
<symbol id="mys">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
<use xlink:href="#mys"></use>
<svg>
</div>
这是一个 jsfiddle,检查 IE 中的不同行为(我检查了 11,但读到 9 也有多个问题): http://jsfiddle.net/ws472q71/
在我的一生中,我无法让它正常工作。上面的代码在 Firefox 和 Chrome 中正常工作,但在 IE 中失败。我阅读了有关 IE 问题的信息,但找不到任何可行的方法。
我做错了什么?
是否有任何其他类似的解决方案可以将 SVG 合并到一个文件中并将它们用作响应式图像?
谢谢!
【问题讨论】:
SVG Stacks 适合你吗? 不,现在还为时过早。我可以没有ie8支持,但不能没有android支持。感谢您指出这一点。 【参考方案1】:正如您所发现的,IE 存在一个错误,即如果您不提供宽度和高度,IE 将无法正确缩放 SVG。
要让它在 IE 中运行,您可以使用 Nicolas Gallagher 发现的技巧 (?)。
http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/
技巧使用<canvas>
元素。 IE 确实正确缩放画布元素。因此,如果您将一个与 SVG 放在 <div>
中,则 SVG 最终将具有正确的大小。您只需为画布提供与 SVG 相同的纵横比即可。
<div style="position:relative;width:100%;background:blue;">
<canvas ></canvas>
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
<use xlink:href="#mys"></use>
</svg>
</div>
使用 CSS
canvas
display: block;
width: 100%;
visibility: hidden;
svg
position: absolute;
top: 0;
left: 0;
width: 100%;
canvas
display: block;
width: 100%;
visibility: hidden;
svg
position: absolute;
top: 0;
left: 0;
width: 100%;
<svg style="display:none;">
<defs>
<symbol id="mys">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
<canvas ></canvas>
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
<use xlink:href="#mys"></use>
</svg>
</div>
无论您是想让它匹配宽度还是高度,这个技巧都有效。
【讨论】:
精彩的答案。与此同时,我自己意识到我可以给 svg 绝对定位,但不能避免必须为父相对元素使用填充底部。这效果更好! :) 谢谢! 您是否将画布元素的宽度和高度设置为与 SVG 相同?如果不明确设置高度和宽度,就没有办法做到这一点吗?我希望能够交换具有不同纵横比的 SVG,而无需不断重新计算宽度和高度。 对我来说,它还可以通过将 CSS 中的宽度设置为1em
来工作,这样我就可以使用 font-size
属性缩放 svg。适用于图标 :)
我没有使用 canvas 元素,而是在包装 div 上使用 ::before 元素,并将底部填充设置为纵横比以实现相同的效果。保存引入一个 hacky 画布元素。 ::before content:""; display:block; width:100%; padding-bottom:42.51968%; visibility: hidden;
【参考方案2】:
附带说明,以帮助任何努力实施此修复或发现它不适用于外部 svg 文件而不是页面内 svg 标记的人
您需要确保在文本编辑器中编辑 svg 文件时,在打开的 <svg>
标记中没有缺少 viewBox 或 preserveAspectRatio 属性。如果无论您应用什么修复程序都缺少这些,svg 仍然无法在 IE 中缩放 - 即使它可以在其他浏览器中缩放而没有问题。
如果设置了这些选项,您可以将用于拉入 svg 的图像元素的宽度/高度定义为 100%,并使用 max-width 或 max-height 来限制缩放,它会按预期执行。虽然 - 您仍然可能会遇到一些对齐问题。
【讨论】:
【参考方案3】:Nicolas Gallagher 的解决方案效果很好,但是,当我减小视口时,我遇到了一些响应问题。我想我会传递我使用的修复程序:
<div class="parent-div">
<canvas ></canvas>
<svg class="mys" viewBox="0 0 254 108">
<use xlink:href="#mys"></use>
</svg>
</div>
我用 max-width:100% 更新了“parent-div”;
.parent-div
position: relative;
display: inline-block;
height: 550px;
max-width: 100%;
这不会解决您的所有扩展问题。您仍然必须使用媒体查询来更改高度,但至少 svg 不会炸毁它的容器。希望这对某人有所帮助。
【讨论】:
【参考方案4】:如果您使用的是<img>
,则可以这样重写
<div class="ie-svgHeight">
<img src="path.svg" class="ie-svgHeight-img">
<canvas class="ie-svgHeight-canvas"></canvas>
</div>
SCSS
.ie-svgHeight
position: relative;
&-canvas
display: block;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
height: 100%;
&-img height: 100%;
【讨论】:
以上是关于SVG 无法在 IE 中正确缩放 - 有额外的空间的主要内容,如果未能解决你的问题,请参考以下文章
带有 viewBox 和宽度的 SVG 在 IE 中无法正确缩放高度
使用 Javascript 动态添加时,SVG 元素无法正确缩放
为啥我的 SVG 在 IE1 或 /Edge 中无法正确显示?