Firefox 语法问题的 CSS SVG 掩码

Question

在 Mozilla 开发者页面上，我正在尝试使用 mask 为 CSS 重新创建他们的 SVG 掩码。属性(property)。

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中#后的部分必须与mask的id一致。所以你说对了。

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