SVG'；maskContentUnits'；在mobile safari中未正确渲染

我有一个用Javascript构建的SVG。我加载一个大的SVG文件，将其分解为多个部分，所有部分都用路径绘制，然后将每个元素放在我的页面中。我只是将这些SVG用作我正在加载的其他图像的遮罩。基本上我的结构如下

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="26.750152587890625 10.117172241210938 197.24969482421875 348.1596221923828" width="197.25" height="348.16015625">
    <mask id="designMask" maskContentUnits="objectBoundingBox">
        <g id="CutContour1bg">
            <path d="[my path coords]" style="fill:#FFFFFF;">
        </g>
    </mask>
    <image href="http://myImage.jpg" style="mask: url(#designMask);" width="800px" height="800px" x="26.75" y="10.1171875">
</svg>

这使得被我的SVG屏蔽的图像在FF、IE9、Chrome、Safari 5.1（桌面）中变得完美。但是，在mobile safari中，图像无法正确渲染。我找出了面具的坐标，它们都是正确的。在FF中，我可以看到SVG加载（全部为黑色），然后随着它成为掩码而消失。（我正在等待设计加载，然后用

包装我的

，因为FF在加载内容之前查找掩码时遇到问题

这告诉我遮罩的位置正是它需要的位置，但

maskContentUnits

不是。它们保留在左上角，而不是像我告诉它的那样，对象的边界框。我几乎看不到遮罩中的部分图像，因此遮罩单位是正确的，但我无法让

maskContentUnits

工作或者在移动safari中阅读

有没有人见过这个问题，或者知道如何纠正它？除了移动safari，我讨厌在任何地方都有这个工作，因为它主要是在移动设备上工作…这违背了它的目的，哈哈

---

谢谢！

我还没有找到一种方法来让

maskContentUnits

在mobile safari中正常工作，我很确定它还没有像其他浏览器一样被识别出来。但是我找到了一个“黑客”来让这个例子工作

问题是，掩码区域位于浏览器的左上角，而不是被用作掩码的SVG对象。因此，如果在页面中间有SVG，被掩蔽的图像将不会遵循相同的定位。

我发现它的工作方式是，我将svg包装在一个与svg宽度相同的

div

中，并修改div的位置，而不是svg。这样，从技术上讲，掩码仍然位于“左上角”，但位于div的位置，而不是svg的偏移位置

---

如果有人找到更好的方法，让

maskContentUnits

在mobile safari中正确呈现，我很乐意听到它！

我对Firefox的问题很感兴趣。你能进一步解释一下吗，也许可以用一个例子，或者在bugzilla中提出一个关于它的错误。基本上，FF的问题是我使用Javascript创建带有

mask

元素的SVG然后，我将创建一个

image

元素加载一个图像，并将其放置在

svg

元素中，从而产生上面的示例。它可以在所有方面都正常工作，但FF会抛出一个错误。因此，现在，我只创建

svg

元素，然后创建

image

元素加载图像加载图像后，我用新创建的

mask

元素包装

g

元素，它解决了这个问题。显然，我与加载图像前链接mask样式有关：/你能用测试用例在bugzilla中创建一个bug吗？请，这样我们就可以查看它了？完成。