Question

我想弄清楚我需要在下面的SVG中更改以完全从过滤器中删除笔划？我想保持元素不变，我只想以最简单的方式从过滤器中删除笔划，我似乎无法弄清楚这是否可能？

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="640" height="480" viewBox="0 0 640 480" xml:space="preserve">
    <rect x="0" y="0" width="640" height="480" fill="rgba(255,255,255,1)"></rect>
    <filter id="SVGID_3" y="-20%" height="140%" x="-82%" width="264%">
	    <feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur>
	    <feOffset dx="100" dy="0" result="oBlur"></feOffset>
	    <feFlood flood-color="rgb(221, 221, 221)"></feFlood>
	    <feComposite in2="oBlur" operator="in"></feComposite>
	    <feMerge>
		    <feMergeNode></feMergeNode>
		    <feMergeNode in="SourceGraphic"></feMergeNode>
	    </feMerge>
    </filter>
    <circle cx="0" cy="0" r="81" style="stroke: rgb(0,0,0); stroke-width: 36; stroke-dasharray: 7 7; stroke-linecap: butt; stroke-linejoin: bevil; stroke-miterlimit: 10; fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;filter: url(#SVGID_3);" transform="translate(213 86.2) "></circle>
</svg>

谢谢

Answer 1

基本答案是否定的。你可以让黑色部分变得透明，但是它会留下红色圆圈，而这些红色圆圈在过去的笔划中会丢失。我怀疑这是你想要的。

但是如果你的意思是“我如何通过改变这个SVG来达到这个效果”，那么答案就是复制圆圈并给出一个填充和过滤器，另一个给出冲程。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="640" height="480" viewBox="0 0 640 480" xml:space="preserve">
    <rect x="0" y="0" width="640" height="480" fill="rgba(255,255,255,1)"></rect>
    <filter id="SVGID_3" y="-20%" height="140%" x="-82%" width="264%">
	    <feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur>
	    <feOffset dx="100" dy="0" result="oBlur"></feOffset>
	    <feFlood flood-color="rgb(221, 221, 221)"></feFlood>
	    <feComposite in2="oBlur" operator="in"></feComposite>
	    <feMerge>
		    <feMergeNode></feMergeNode>
		    <feMergeNode in="SourceGraphic"></feMergeNode>
	    </feMerge>
    </filter>
    <circle cx="0" cy="0" r="81" style="fill: rgb(255,0,0); fill-rule: nonzero; opacity: 1;filter: url(#SVGID_3);" transform="translate(213 86.2) "></circle>
    <circle cx="0" cy="0" r="81" style="stroke: rgb(0,0,0); stroke-width: 36; stroke-dasharray: 7 7; stroke-linecap: butt; stroke-linejoin: bevel; stroke-miterlimit: 10; fill: none;" transform="translate(213 86.2) "></circle>
</svg>

是否可以仅从过滤器中删除笔划？

1 个答案: