带有宽度/高度的SVG在IE9/10/11上不缩放
IE 9/10/11存在一个已知的问题，如果您有一个SVG文件，其中
元素指定了宽度和高度，然后使用widtheight属性缩放SVG图像，IE就不能正确缩放图像。
我遇到过这个问题。我有一系列SVG标志图标。对于美国标志图标，SVG对象写成：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">
<!-- elements to draw flag .. -->
</svg>
下面是SVG的全部源代码。
我将SVG插入到带有
null
在Chrome 39上,SVG的渲染方式如下所示：
但在IE10上,它呈现如下：
所以，这里似乎发生的事情是，尽管IE10将
好吧...因此，这似乎是一个已知的问题，有文档化的解决方案。一种解决方案是简单地删除SVG文件中的所有width和height属性。这似乎有点危险，因为我不想搞砸实际的设计。如果您有很多SVG文件，那么这样做也有点麻烦--需要更多的脚本来处理这些文件。
一个更好的解决方案是使用CSS专门针对IE10中的SVG元素，这显然可以使用特定于供应商的媒体查询：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}
好吧，但我不明白这个解决方案。当我尝试上面的操作时，IE10只是扩展SVG的大小来填充整个父容器，这不是我想要的。好的，所以也许我可以通过将SVG宽度设置为100%，但然后约束父容器的大小来强制IE缩放SVG。所以我将
...所以，我可能只是不理解这个解决方案。我如何让IE10/11将标志图标缩放到20x15？
共有1个答案
当您的图像缺少svg元素上的viewbox属性时，就会发生这种情况。
您的应设置为:0 0 640 480。0是X和Y偏移，640和480对应于宽度和高度。它定义了一个表示图像边界的矩形。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">
-
我创建了一个带有foreignObject文本的SVG，并使用img标记将其链接到HTML页面中。 问题是svg的宽度是按设备缩放的，但高度固定在153px左右。我已经将svg的宽度和高度设置为100%。 我不能为svg提供固定的高度，因为我希望文本部分响应和按设备缩放。 在这种情况下，我不能使用任何JS来解决任何问题。
-
我试图构造带有viewBox属性的内联SVG，但没有显式的width或height属性。我正在使用CSS将SVG的宽度设置为100%。这将允许SVG缩放到其包装容器中，保持由ViewBox设置的纵横比。在Chrome和Firefox中，这是完美的！ 下面是我所讲内容的一个最小代码示例：http://codepen.io/pcorey/pen/amkgl HTML： CSS： viewBox是100
-
问题内容： 我正在与offsetWidth属性的怪异（我认为）作斗争。 这是场景： 可以说，我的js中有一个 span 标签，在某个时候，我对该元素执行css3转换，例如： 此时，日志返回模糊值，就像它不知道说什么一样。 有什么建议吗？ 问题答案： 为我返回正确的值。
-
我用角2,我创建一个甜甜圈图 组件的html 我想要的是将这些值作为主组件的输入进行传递。因此，假设在html上，我将该组件称为： 主HTML 组成部分js代码 因此，我的问题是如何将这些输入传递到组件的html中。
-
我已经尝试编辑默认图像大小的缩略图在wordpress通过设置 我还多次重新生成缩略图，删除并重新添加它们，但它们似乎仍然不会从300变到300。 查看源代码时，缩略图解析为： img width=“300”height=“300”src=” 完全忽略通过管理员cp设置的维度。 当我从自定义模板更改为2122时，尺寸从300更改为288px。 这些维度是从哪里被拉出来的？它开始让我发疯了。 提前谢
-
因为需要给固定宽高才会渲染html 但是内部div高度不定 如何让html撑开foreignObject的高度