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);
}

掩码/ 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掩码总是使元素不可见

1 个答案: