Question

我在Snap.svg中使用此代码来创建模式，然后填充路径：

var s = Snap("#mysvg");
pattern = s.image(imgUrl, myX, myY, 200, 160).toPattern(myX, myY, 200, 160);
var frontHex = s.path(myPath).attr({
    fill: pattern
});

，输出类似于：

<svg id="mysvg">
<defs>
<pattern x="myX" y="myY" width="200" height="160" patternUnits="userSpaceOnUse" id="Si2mwvzou6" viewBox="myX myY 200 160">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="imgUrl" preserveAspectRatio="none" x="myX" y="myY" width="200" height="160"></image>
</pattern>
</defs>

<path d="myPath" fill="url('#Si2mwvzou6')"></path>
</svg>

问题是IE似乎与模式元素的工作方式不同，为了在正确的位置显示图像，我必须设置图像元素的x和y总是等于0。

pattern = s.image(imgUrl, 0, 0, 200, 160).toPattern(x, y, 200, 160);

模式元素中的输出：

<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="imgUrl" preserveAspectRatio="none meet" x="0" y="0" width="200" height="160"></image>

我想在客户端使用IE时更改脚本，但不推荐“检测特定浏览器”，无论如何，user.agent技巧不再起作用：IE compatibility guidelines。

我从未使用过Modernizr。也许这个问题可以通过特征检测来解决？怎么样？

Snap.svg会自动在模式上添加patternUnits =“userSpaceOnUse”，并在图像上自动添加AspectRatio =“none meet”。这里有事可做吗？

更新

我使用这个简单的片段暂时修复了错误：

var image = s.image(myUrl, x, y, 200, 160);
if(image.attr("preserveAspectRatio") === "none meet")
    image.attr({x: 0, y: 0});

适用于IE，Firefox和Chrome。如果有更好或更正确的解决方案，我会打开问题。

SVG图像模式位置，IE中的行为不同

0 个答案: