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

我在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>

模式元素内的输出：

<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、Firefox和Chrome。

---

如果有更好或更正确的解决方案，我会将问题留待讨论。

我刚刚注意到，在IE中添加了PreserveSpectratio中的“满足”值，但在Firefox和Chrome中没有。我只能在找到“meet”值时尝试解决这个问题，尽管我对这样做有点不信任。根据svg规范，当指定了

none

时，

meet

值不应该起作用，请参见。是的，我不知道为什么，但只有在使用IE时，才保留Aspectratio=“none meet”是自动生成的，而不仅仅是“无”。因此，我利用这个不同的输出来知道何时相应地修复模式图像坐标。

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

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