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

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

转载作者：行者123 更新时间：2023-12-03 23:47:51

24

4

以下 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

文章推荐： javascript - 我想打印数组的最后 'n' 个元素

文章推荐： android - react 原生 : How to open OS settings in Android and iOS?

文章推荐： android - 有没有办法以编程方式使用约束布局助手小部件流？

文章推荐： kubernetes - 覆盖 helm 中的配置映射文件

尊重 knitr 中的全局选项
我在 R Markdown 文档中设置全局选项时遇到问题。下面是一个简单的例子。在这种情况下，我试图设置 global.par = TRUE .期望是任何 par()我在一个夹头中制作的规范被带到后续
web - 尊重 cloudflare 中的语言标题
Cloudflare 正在缓存我的请求，但它忽略了语言 header 。示例请求: URL : https://api.example.com/v1/places/?param=1¶m=2
r - 每个方面的总和百分比 - 尊重 "fill"
我正在尝试创建一个分面条形图，每个分面的百分比加起来为 100。对此的解决方案似乎是 group 的组合和 ..density.. .如何 - 在我看来 group与 fill 冲突. 数据: tes
c# - 尊重 Windows 时间格式的即时更改
我正在开发一个 C# 应用程序，该应用程序试图遵守其运行系统的时间格式。如果 Windows 控制面板更改为 24 小时格式，这就是应用程序显示时间的格式。无论如何，它成功地做到了这一点，除了只有在应
vim - 我如何让 Vim 尊重 .editorconfig？
我用过 Vundle安装 editorconfig-vim插件。它正确加载并列在 :scriptnames 中.但是当我创建一个新文件时，比如 x.js ，缩进设置不是从 ~/.editorconfi
php - 尊重 Laravel Blade 中的换行符
我曾尝试使用不同的方法自行解决这个问题，但没有一个给我预期的结果。当我在我的项目的数据库中保存一个文本类型的变量时，问题就出现了。它用换行符保存它，事实上，当我尝试从我的一个 View 中编辑它时，
jquery - 如何让 IE8 尊重 .removeClass()？
让我头疼的代码是这样的: $('#timeline .selected').removeClass('selected'); 它在 IE8 中无法正常运行。这些类确实被正确删除，但不知何故该元素仍然具
java - 尊重 Java/Swing 中的字体连字
在处理 java 中的 Swing 对象(还有 JFX，但我稍后会担心这个问题)时，我遇到了一个让我摸不着头脑的问题。这是我用来在程序中打开字体的代码。这是相当标准的。 public static
php - 我怎样才能让 SoapClient 尊重 session ？
我正在为电子商务购物车使用 SOAP API，但我似乎无法让 session 在不同的页面中持续存在。作为示例，我在下面有一些测试代码(带有一堆调试消息)，它将一个项目添加到购物车，然后查看购物车。
html - 如何使 LEGEND 尊重 FIELDSET 宽度
我有一个 fieldset与 legend可能加载了很长的字符串。我想要 legend尊重 fieldset 的宽度并且只使用了 50% 的空间。目前，如果legend太长它仍然只占fieldse
3d - Gnuplot:尊重 Gnuplot 3d 多边形的深度顺序
我有一个完整城市的 3D 模型，想展示一个这些建筑物的等距 View 。我为此使用 gnuplot 多边形，因为我不认为我可以将 pm3d 用于具有坐标的多边形不在一个明确定义的网格上。多边形以
clojure - 如何让 Clojure 尊重 `*assert*` 变量？
我理解 Clojure 的 *assert*变量可用于关闭断言，但我所做的一切似乎都不起作用。 (defn foo [a] {:pre [(pos? a)]} (assert (even? a
wpf - 如何使 Binding 尊重 DependencyProperty 值强制？
我有一个带有 DependencyProperty 和 CoerceValueCallback 的控件。此属性绑定(bind)到模型对象上的属性。当将控件属性设置为导致强制的值时，绑定(bind)会
mono - 让 MonoDevelop 尊重 smcs.rsp
可以通过将它们放置在 smcs.rsp 中来创建全局定义，当您点击播放时 - 您会注意到代码的这些部分被点击，并且一切都表现得好像它应该的那样。但是，在 MonoDevelop 中编辑源代码时，它无
python - 尊重 argparse 隐私，并且。可用性
总的来说，我非常努力尊重模块的隐私(如果变量以下划线为前缀，我不会使用它)。然而，我有一个极端的情况，它看起来相当“安全”。这是演示 ( my previous question ) parser=
javascript - 如何让 IE9 尊重 jquery hover()
我有一个悬停动画的 div(我正在使用 jquery 的 .hover() 方法)。 div 包含一个带有选择的表单。打开选择并悬停在选项上会使 IE9 将其解释为“取消悬停”父 div，导致第二个悬
c# - 让 EntityFramework 尊重 mysql max_user_connections
如果 max_user_connections 连接已打开，是否有方法告诉 Entity Framework 等待？我想我可以捕获异常并重试或保留一个计数器，但这最多感觉很糟糕。我的 Azure
java - 是否可以让 BitmapFactory.decodeFile() 尊重 EXIF？
在我的测试中，BitmapFactory.decodeFile() 创建的 Bitmap 不遵循 EXIF header 。例如，当我调用 Bitmap.getWidth() 时，设备拍摄的肖像图像
javascript - 如何使用 mongoose 尊重 NodeJS 应用程序中的执行顺序
请帮助我了解如何解决这个问题。这是我的路由文件 (auth-routes.js) const userControllers = require('../controllers/user') mod
javascript - 如何让 testcafe 尊重 `` 标签
我的应用程序有时会注入(inject) 标记到网站中，然后创建一个新的带有亲戚的标签 src 例如设置并注入(inject) 导致浏览器从 http://localhost:8080/chapter

首页

博学

6Ren·AI

商城

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