为了账号安全,请及时绑定邮箱和手机立即绑定

SVG在IE中没有正确缩放 - 有额外的空间

SVG在IE中没有正确缩放 - 有额外的空间

不负相思意 2019-08-05 14:46:27
SVG在IE中没有正确缩放 - 有额外的空间我决定为我的一个项目切换到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合并到一个文件中并将它们用作响应式图像?谢谢!
查看完整描述

3 回答

?
喵喵时光机

TA贡献1846条经验 获得超7个赞

在旁注,以帮助任何人努力实现此修复或发现它不使用外部svg文件而不是页内svg标记

您需要确保在文本编辑器中编辑svg文件时,它不会缺少开始标记中的viewBox或preserveAspectRatio选项。如果无论你应用什么修复程序都缺少这些修复程序,那么svg仍然无法在IE中扩展 - 即使它在其他浏览器中可以毫无问题地扩展。

如果设置了这些选项,则可以在用于将svg拉入100%的图像元素上定义宽度/高度,并使用max-width或max-height限制缩放,它将按预期执行。虽然 - 你仍然可以得到一些对齐问题。


查看完整回答
反对 回复 2019-08-05
?
慕的地10843

TA贡献1785条经验 获得超8个赞

Nicolas Gallagher的解决方案效果很好,然而,当我减少视口时,我遇到了一些响应问题。我以为我会传递我使用的修复:

 <div class="parent-div">
    <canvas width="3" height="1"></canvas>
    <svg class="mys" viewBox="0 0 254 108">
         <use xlink:href="#mys"></use>
    </svg>
 </div>

我用max-width更新了“parent-div”:100%;

.parent-div{
     position: relative;
     display: inline-block;
     height: 550px;
     max-width: 100%;
}

这不会解决所有缩放问题。你仍然需要使用媒体查询来改变高度,但至少svg不会炸掉它的容器。希望这有助于某人。


查看完整回答
反对 回复 2019-08-05
  • 3 回答
  • 0 关注
  • 1001 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信