0

我有一个用 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>

在 FF、IE9、Chrome、Safari 5.1（桌面版）中，这使我的 SVG 完美遮盖了图像。然而，在移动 Safari 中，图像无法正确呈现。我追踪了面具的坐标，它们都是正确的。在 FF 中，我可以看到 SVG 负载（全黑）然后在它变成蒙版时消失。（我一直等到设计被加载，然后将我的包装<g>好，<mask>因为 FF 在加载内容之前寻找掩码时遇到问题。

这告诉我面具的位置正是它需要的位置，但maskContentUnits不是。它们保留在左上角，而不是对象的边界框，就像我说的那样。我几乎看不到面具中的部分图像，所以面具单位是正确的，但我无法maskContentUnits在移动 safari 中工作或阅读。

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

谢谢！

4

1 回答 1

1

我还没有找到一种maskContentUnits在移动 safari 中正常工作的方法，我很确定它只是不像其他浏览器那样被识别。但是我想出了一个“hack”来使示例正常工作。

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

我发现它的工作方式是，我将 svg 包裹在与 svgdiv相同宽度的 a 中，并修改 div 的位置而不是 svg。这样，从技术上讲，掩码仍位于“左上角”，但位于 div 而不是 svg 的偏移位置。

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

于 2012-06-15T16:39:30.990 回答