Question

这个html + svg页面（没有javascript）在IE + Firefox上不起作用，而它适用于所有其他浏览器（Chrome，Safari和Opera）。

<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="graphics" style="overflow: hidden; position: relative;">
    <defs>
        <pattern id="A" patternUnits="objectBoundingBox" width="80" height="27">
            <image xlink:href="Data/Dialoghi/tl/PN.3000994/A/1.png" width="80" height="27"></image>
        </pattern>

...还有7种模式

    </defs>
    <path fill="url(#A)" d="M31.20418,1.17813L39.54938,1.17813L39.54938,81.79142999999999L11.964579999999998,81.79142999999999C13.448279999999999,68.15012999999999,16.862979999999997,54.26062999999999,21.96358,41.51922999999999C26.683880000000002,28.519329999999993,29.80658,14.937729999999995,31.20418,1.178129999999996Z"></path>

...... 150多条路径或地方

只有当我将数字保持在30-40以下时，页面才能在任何地方使用;在那之后的某个时刻，它停止渲染页面，在IE 10上只显示空白区域并且崩溃了Firefox（所有其他浏览器都运行良好）。

我想念什么？你如何调试这样的案例？

非常感谢。

Answer 1

您已指定patternUnits =“objectBoundingBox”，因此宽度和高度的值为1是形状的大小。因此，您创建的图案大小是您绘制图案的形状大小的80倍左右，就像创建一个像英国一样大小的图案来绘制伦敦。

使图案宽度和高度合理（即＆lt; = 1）或使用userSpaceOnUse单位

图像无法在IE 10和Firefox中运行的SVG模式

1 个答案: