【发布时间】：2018-10-31 20:06:58
【问题描述】：
我有矩形/路径作为具有发光效果的矩形。只要我不掩盖内部部分（即隐藏矩形内部的填充或发光），它就可以很好地工作。遮蔽部分对象会产生一些之前平滑光晕的丑陋效果。
因此，应用蒙版似乎会以某种方式呈现之前的“图像”。有没有办法避免这种情况？如果没有，有其他选择吗？
<svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
<feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
<feMerge>
<feMergeNode in="blurred"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<mask id="Mask1">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
<mask id="Mask2">
<rect x="-100" y="-100" width="250" height="250" fill="white" />
<rect x="3" y="3" width="34" height="34" fill="black" />
</mask>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="40" height="40" fill="#00e4ff"/>
<rect transform="translate(60,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)"/>
<rect transform="translate(120,0)" x="0" y="0" width="40" height="40"
fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/>
<path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" fill="none"/>
<path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/>
<path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/>
</g>
</svg>【问题讨论】：
-
“丑陋效应”到底是什么意思？
-
渐变在边缘的一半处被切断。我希望它能够像没有面具一样平滑。对于
x="-100" y="-100" width="250" height="250"，我认为面具足够宽......
标签： svg svg-filters