SVG 遮罩总是使元素不可见

Question

我在 Ubuntu 15.10 上使用 Chrome 49.0.2623.87（64 位）。在 Firefox 中也不起作用。

我有以下代码使用 svg.js:

function blockmouseenterHandler(){
    console.debug('mouseenter')
    var mask = anatomy.frame.rect(100,100).move(0,0).addClass('hovermask').fill({ color: '#000'});
    this.maskWith(mask);
}

它创建的mask/defs：

<defs id="SvgjsDefs1000">
    <clipPath id="SvgjsClipPath1022">
        <rect id="SvgjsRect1023" width="685.528361111111" height="692.5839166666665" x="0" y="0"></rect>
    </clipPath>
    <clipPath id="SvgjsClipPath1040">
        <rect id="SvgjsRect1041" width="1452.812972222222" height="128.13947222222222" x="0" y="0"></rect>
    </clipPath>
    <clipPath id="SvgjsClipPath1057">
        <rect id="SvgjsRect1058" width="1071.834138888889" height="128.13947222222225" x="0" y="0"></rect>
    </clipPath>
    <mask id="SvgjsMask1062">
        <rect id="SvgjsRect1061" width="100" height="100" x="0" y="0" class="hovermask" fill="#000000"></rect>
    </mask>
</defs>

屏蔽元素：

<g id="SvgjsG1027" transform="matrix(1,0,0,1,810.1224365234375,191.731201171875)" class="block" clip-path="url(&quot;#SvgjsClipPath1040&quot;)" mask="url(&quot;#SvgjsMask1062&quot;)">
    <rect id="SvgjsRect1028" width="1452.812972222222" height="128.13947222222222" x="0" y="0" fill="#dddddd" stroke-width="0" opacity="0.5"></rect>
    <g id="SvgjsG1029" transform="matrix(1,0,0,1,0,0)">
        <rect id="SvgjsRect1030" width="1452.81298828125" height="128.13946533203125" class="svg_select_boundingRect svg_select_points"></rect>
        <circle id="SvgjsCircle1031" r="3.5" cx="0" cy="0" class="svg_select_points_lt svg_select_points"></circle>
        <circle id="SvgjsCircle1032" r="3.5" cx="1452.81298828125" cy="0" class="svg_select_points_rt svg_select_points"></circle>
        <circle id="SvgjsCircle1033" r="3.5" cx="1452.81298828125" cy="128.13946533203125" class="svg_select_points_rb svg_select_points"></circle>
        <circle id="SvgjsCircle1034" r="3.5" cx="0" cy="128.13946533203125" class="svg_select_points_lb svg_select_points"></circle>
        <circle id="SvgjsCircle1035" r="3.5" cx="726.406494140625" cy="0" class="svg_select_points_t svg_select_points"></circle>
        <circle id="SvgjsCircle1036" r="3.5" cx="1452.81298828125" cy="64.06973266601562" class="svg_select_points_r svg_select_points"></circle>
        <circle id="SvgjsCircle1037" r="3.5" cx="726.406494140625" cy="128.13946533203125" class="svg_select_points_b svg_select_points"></circle>
        <circle id="SvgjsCircle1038" r="3.5" cx="0" cy="64.06973266601562" class="svg_select_points_l svg_select_points"></circle>
        <circle id="SvgjsCircle1039" r="3.5" cx="726.406494140625" cy="20" class="svg_select_points_rot"></circle>
    </g>
    <text id="SvgjsText1042" font-family="Ubuntu" font-size="120" text-anchor="middle" fill="#000000" alignment-baseline="central" width="1452.812972222222" height="128.13947222222222" x="726.406486111111" y="-35.00838888888889" svgjs:data="{&quot;leading&quot;:&quot;1.2em&quot;}">
        <tspan id="SvgjsTspan1043" dy="144" x="726.406486111111" svgjs:data="{&quot;newLined&quot;:true}">Book Title</tspan>
    </text>
</g>

无论我在蒙版上使用什么填充颜色，它总是使蒙版元素完全不可见。据我了解，只有 #fff 的颜色才能使其完全透明，#000 根本不应该遮罩，中间的值应该提供部分透明度，对吗？

更新：https://jsfiddle.net/cmuyebma/

Answer 1

您的面具由一个 100x100 的黑色矩形组成。面具中的黑色代表透明。

因此，您正在使用表示透明的遮罩来遮盖目标元素。所以它变得不可见。

如果您希望目标元素的 100x100 部分可见，则应将遮罩矩形设为白色。

如果你想在你的目标元素上有一个 100x100 的孔，那么你应该有一个完全白色的遮罩，顶部有一个 100x100 的黑色矩形（代表孔）。

SVG 遮罩总是使元素不可见

SVG mask always turns element invisible

javascript

svg

svg.js