Question

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

mask，-webkit-mask
mask-image，-webkit-mask-image
不同的MaskUnits和MaskContentUnits
mask-type：亮度与否

我不能让它发挥作用，我必须做错事和愚蠢。

<!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改变掩模坐标？我希望它跟随鼠标指针。

谢谢！

Answer 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>

使用html

1 个答案: