用于Firefox语法问题的CSS SVG Mask

Question

在Mozilla Developer页面中，我尝试使用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中，我为什么要在URL之后加上#circleMask标识符？删除它不会使我的代码工作，并且它包含在MDN网站规范中找到，所以我把它放在那里。

2. 我的SVG是否正确？我是否必须使用<mask>代码以及id和objectBoundingBox属性？它们用于什么？

Answer 1

URL中＃后面的部分必须与掩码的id相同。所以你有这个部分。

如果需要，您可以使用objectBoundingBox，但您的内容似乎不对。您的蒙版半径是其屏蔽对象大小的50倍。也许你的意思是50％。与cx和cy相同。