Question

我有一个用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（桌面）中。但是，在移动Safari中，图像无法正常渲染。我找出了面具的坐标，它们都是正确的。在FF中，我可以看到SVG负载（全黑）然后在它成为掩码时消失。（我等到设计加载完毕，然后用<g>包裹我的<mask>，因为FF在加载内容之前有问题需要查找掩码。

这告诉我掩码的位置正好在它需要的位置，但maskContentUnits不是。它们保留在左上角而不是对象的边界框，就像我告诉它的那样。我几乎看不到面具中的部分图像，因此面具单位是正确的，但我无法使maskContentUnits工作或在移动野生动物园中阅读。

有没有人见过这个问题，或者有任何想法如何纠正它？我讨厌除了移动游猎之外的任何地方都有这项工作，因为它主要是在移动设备上工作......这打败了它的目的哈哈。

谢谢！

Answer 1

我还没有办法让maskContentUnits在移动游戏中正常工作，我很确定它还没有像其他浏览器一样被识别出来。但我想出了一个'黑客'来使这个例子有效。

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

我发现它工作的方式是，我将svg包装在与{svg具有相同宽度的div内，并修改div的位置而不是svg。这样，掩模在技术上仍然在“左上角”，但是在div而不是svg的偏移位置。

如果有人找到更好的方法，让maskContentUnits在移动游猎中正确渲染，我想听听！

SVG'maskContentUnits'在移动Safari中无法正常呈现

1 个答案: