xml – SVG:将掩码应用于路径组标记
我在应用< mask>时遇到了问题层到< g>路径组.
当我应用我的< mask>对于< rect>,它按预期工作,但是当在< g>上使用它时,整个组消失. 这是我的文件 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="600px" height="600px" viewBox="0 0 600.000000 600.000000" preserveAspectRatio="xMidYMid meet"> <defs> <mask id="myMask" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600"> <rect fill="white" x="0" y="0" width="600" height="600"></rect> <circle cx="30" cy="30" r="20" fill="black"></circle> <circle cx="300" cy="300" r="200" fill="black"></circle> </mask> </defs> <rect fill="#FFFFFF" width="21456" height="21456" mask="url(#myMask)"></rect> <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#100059" stroke="none" mask="url(#myMask)"> <!-- a bunch of <path>s --> </g> <g transform="translate(0.000000,-0.100000)" fill="#f542b3" stroke="none"> <!-- a bunch of <path>s --> </g> </svg> 我也尝试过使用clip-path的类似方法,结果相同 – 使用< rect>但不是< g>.我也尝试将mask属性应用于个人< path>具有相同结果的元素 任何帮助赞赏 解决方法
我非常怀疑这个问题是否仍然存在,但我认为无论如何我都会在这里给出答案.
要同时屏蔽一组元素,请将它们全部包含在< g>< / g>范围内.块.然后你有几个选择: 简易风格:在所有元素上设置不透明度 如果您对整个组中的不透明度或其他转换感到满意,请提供< g>< / g>元素一个类或ID,并相应地设置CSS: <g id="someGroup" class="class1 class2"> <path ...></path> <circle ...></circle> <whatever ...></whatever> </g> 和CSS(可能不是全部在一起,但你明白了): g,#someGroup,.class1,.class2 { opacity: 0.5; } 不太容易:设置一个面具并适用于该组(OP问题) 首先,您必须在< defs>< / defs>中设置掩码.带有ID的块,然后将其应用于组.一个例子: <mask id="easyMask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> <rect x="0" y="0" width="1" height="1" style="fill-opacity: 0.25; fill: white;"/> </mask> 我不会解释掩蔽元素,因为OP似乎已经知道了.但是,为了一个彻底的指导,头here并阅读.无论如何,一旦你在defs中设置了面具,就这样将它应用到组中: <g style="mask: url(#easyMask);"> <path ...></path> <circle ...></circle> <whatever ...></whatever> </g> 最重要的部分是样式元素样式=“mask:url(#easyMask);”实际上应用了面具.它将适用于g组的所有子元素.只需将#easyMask与面具的ID重新联系,就可以了!没有尝试过任何其他选择器(如.class1或其他),但#的存在似乎表明CSS风格的选择器.做一个实验:-) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |