使用 html 中定义的 svg 掩码进行掩码答案

【问题标题】：masking with svg mask defined in html使用 html 中定义的 svg 掩码进行掩码
【发布时间】：2015-06-28 00:41:03
【问题描述】：

我正在尝试使用我在 html 内容中创建的 SVG 形状进行一些非常简单的遮罩测试。我尝试了不同的选择：

掩码，-webkit-掩码
掩码图像，-webkit 掩码图像
不同的 MaskUnits 和 MaskContentUnits
遮罩类型：亮度与否

我不能让它工作，我必须做一些错误和愚蠢的事情。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mask with SVG</title>
        <link rel="stylesheet" href="/style.css" />
    <style>
        .testMask {
            -webkit-mask-image: url(#torch);
            mask-image:url(#torch);
        }
    </style>
</head>
<body>
   <svg width="0" height="0">
        <defs>
            <mask id="torch">
                <circle cx="0.5" cy="0.5" r="0.1" fill="white" />
            </mask>
        </defs>
    </svg>
    <div id="mainPage">
        <img src="/img/Japan.jpg" class="testMask">
    </div>
</body>

那里有什么问题吗？第二个问题是，有没有办法通过js改变掩码坐标？我希望它跟随鼠标指针。

谢谢！

【问题讨论】：

标签： html css svg mask

【解决方案1】：

<mask> 内容元素的默认单位是objectBoundingBox（即maskContentUnits="objectBoundingBox"）。在这种模式下，作为遮罩一部分的元素中使用的坐标相对于边界框。换句话说，(0,0) 是左上角，(1,1) 是右下角。

因此，您在 (50,50) 处的圆圈远离蒙版边缘。

最好坚持使用 objectBoundingBox 单位，因此请尝试以下方法：

<mask id="torch" >
    <circle cx="0.5" cy="0.5" r="0.1" fill="white" />
</mask>

注意：

使用内联 SVG 进行屏蔽在 Firefox 中有效（请参阅 http://jsfiddle.net/dv6mx96t/），但在 Chrome 中无效。对于跨浏览器工作的掩码，您需要使用外部图像。该图像可以是 SVG 或 PNG 等。

例如：

.testMask {
    mask: url(mask.svg);
}

mask.svg 是：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
    <circle cx=".5" cy=".5" r=".35" fill="white" />
</svg>

【讨论】：

谢谢，我忘了说我玩过那些，它也不起作用。我忘了说，不是我没有面具：img 根本没有显示。如果我删除它的类，那么肯定有问题。
实际上它在 Chrome 和 Safari 中没有显示，但在 firefox 下显示未屏蔽。为什么他们又杀了闪电侠？ :)
对不起。我的错。内联 SVG 蒙版在 Firefox 中有效，但在 Chrome 中无效。我已经更新了我的答案。
非常感谢。我尝试使用.png，我也没有运气。明天我将尝试使用 .svg ......我应该将文本保存在外部文件中吗？如何将其包含在 html 中？虽然我能够从 DOM 操作掩码？与 chrome 的兼容性问题很奇怪，它也不适用于 Firefox：img 显示但未屏蔽。
查看我的答案更新。我链接到一个适用于 FF 的示例。另外还有一个如何使用外部 SVG 的示例。如果您使用外部文件，您将无法通过 DOM 操作掩码。您可能会发现将要遮罩的图像放在 SVG 中更容易。然后它应该适用于所有浏览器。