gpt4 book ai didi

svg - Internet Explorer 不尊重 SVG 百分比宽度

转载 作者:行者123 更新时间:2023-12-03 23:47:51 24 4
gpt4 key购买 nike

以下 SVG 在 Windows 和 Linux 上的 Firefox 和 Chrome 中呈现良好。然而,在 IE11 中,渲染图的整体尺寸很小 - 大约 170 像素宽 - 并且完全不响应浏览器窗口大小的变化,就像在其他浏览器中那样(并且应该):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>

<svg width="65%" viewBox="0 0 700 620" style="margin-left:auto; margin-right:auto;display:block;">
<svg width="700" height="20" style="margin-left:auto; margin-right:auto;display:block;">
<rect width="100%" height="100%" style="fill:rgb(128,128,255);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>

<svg width="700" height="600" y="20" viewBox="0 0 700 600" style="margin-left:auto; margin-right:auto;display:block;">
<rect width="100%" height="100%" style="fill:rgb(255,200,255);stroke-width:1px;stroke:rgb(0,0,0);" />
<rect width="100" height="100" x="0" y="0" style="fill:rgb(255,255,200);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
</svg>

</body>
</html>

(抱歉内联样式;只是在尝试,那样会更快)

我对 SVG 有点陌生,我在这里没有看到任何特别错误的地方。这只是另一个特定于 IE 的失败,还是我错过了什么?

注意:添加 jsfiddle link

最佳答案

因此,事实证明,这是 Internet Explorer 似乎无休止地未能遵守简单、广泛的标准的又一例。我可以把它归结为一个简单的例子:

<!DOCTYPE html>

<body>
<svg width="65%" viewBox="0 0 700 600">
<rect width="100%" height="100%" style="fill:rgb(255,100,255);stroke-width:1px;stroke:rgb(0,0,0);" />

</svg>
</body>

在任何真实浏览器中,这将正确绘制一个粉红色矩形,其宽度为浏览器窗口宽度的 65%,纵横比为 700w x 600h;更改窗口大小将更改矩形大小。

在 Internet Explorer 中,这只是失败了,并绘制了一个小矩形 - 尽管具有适当的纵横比 - 大约 170 像素宽。谁知道这个尺寸是从哪里来的?无论它来自哪里,它都是固定的,不受浏览器大小调整的影响。这是 SVG 文档的失败,Firefox、Chrome 以及可能地球上的所有其他浏览器都设法遵守这些文档。

像往常一样,解决方法是在遇到 IE 时定义一个退化的、固定大小的 SVG 标签,例如
<svg width="700mm" height="600mm"...>

并失去了急需的调整大小功能。而且,我想,只要我还在为辨别正在运行的浏览器而烦恼——这在 2014 年我永远都不应该做——我也可以在页面上放置一个令人讨厌的注释,告诉用户避开 Microsoft 并获得一个真正的浏览器。

关于svg - Internet Explorer 不尊重 SVG 百分比宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21922263/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com