css - Firefox 语法问题的 CSS SVG 掩码

Question

从 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 示例那样嵌入。我没有尝试嵌入它，但我不明白为什么会有帮助。有几件事我不清楚。

1. 在 CSS 中，为什么我将 #circleMask 标识符放在 URL 之后？删除它不会使我的代码工作，并且它包含在 MDN 站点规范中，所以我把它放在那里。

2. 我的 SVG 是否正确？我必须使用<mask>标签id和objectBoundingBox属性吗？它们是用来做什么的？

Answer 1

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

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