Firefox 语法问题的 CSS SVG 掩码答案

【问题标题】：CSS SVG Mask for Firefox syntax issueFirefox 语法问题的 CSS SVG 掩码
【发布时间】：2012-10-24 20:29:40
【问题描述】：

从 Mozilla 开发者页面，我尝试使用 mask 属性为 CSS 重新创建 SVG 掩码。

CSS：

#canvasPreview {
    mask: url(images/masks/circle2.svg#circleMask);
}

HTML：

<img id="canvasPreview" src="placehold.it/100x100"></img>

SVG：

<svg>
    <mask id="circleMask" maskContentUnits="objectBoundingBox">
        <circle cx="50" cy="50" r="50" fill="white" />
    </mask>
</svg>

SVG 是外部引用的，而不是像 MDN 示例那样嵌入。我没有尝试嵌入它，但我不明白为什么会有帮助。有几件事我不清楚。

在 CSS 中，为什么我将 #circleMask 标识符放在 URL 之后？删除它不会使我的代码正常工作，并且在 MDN 站点规范中找到了它，所以我把它放在那里。
我的 SVG 是否正确？我必须使用<mask> 标签和id 和objectBoundingBox 属性吗？它们是做什么用的？

【问题讨论】：

【解决方案1】：

URL中#后面的部分必须与掩码的id相同。所以你说得对。

您可以根据需要使用 objectBoundingBox，但您的内容似乎有误。您的遮罩半径是它所遮罩的对象大小的 50 倍。也许你的意思是 50%。与 cx 和 cy 相同。

【讨论】：