以下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链接
Six*_*ees 10
因此,事实证明,在看似无休止的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年永远不应该做的事情 - 我也可以在页面上删除一个令人讨厌的注释,告诉用户避开微软并得到一个真正的浏览器
不要在SVG元素本身上设置%宽度,而是将SVG分别包含在两个嵌套的div标签中,其中css类分别为"svg-flex"和"svg-flex-inner".使用图形所需的百分比设置外部元素的宽度,而不是直接在SVG元素上设置它.确保您的SVG元素宽度为100%.
<div class="svg-flex" style="width: 50%;">
<div class="svg-flex-inner" style="width: 50%; position: relative; padding-top: 100%;">
<svg style="width: 100%; height: 100%; position: absolute; margin-top: -100%;">
<!-- Whatever you want here -->
</svg>
</div>
</div>
您可以将这些样式添加到页面中,而不是内联css
.svg-flex-inner {
position: relative;
padding-top: 100%;
}
.svg-flex svg {
position: absolute;
margin-top: -100%;
width: 100%;
height: 100%;
}
现在,您可以通过修改外部"svg-flex"元素的宽度来控制SVG的宽度.
如果您的元素不是完美的正方形,那么您需要使用以下公式调整padding-top和margin-top值:
(100 * height / width) %.
所以,对于16:9的图形,比例为100*9/16 = 56.25%
padding-top: 56.25%;
...
margin-top: -56.25%
Fra*_*her -3
使用 HTML5 并将 svg 放入 DIV 中，如下所示。适用于所有浏览器
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<div style="width:700px;height:620px">
<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>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
7646 次 |
| 最近记录： |