【发布时间】：2025-12-24 19:25:07
【问题描述】：
我正在尝试为 svg 路径制作“外发光”过滤器，因此结果形状具有“发光”。
问题是，路径是半透明的，我不希望光通过路径可见。我如何获取 sourceGraphic 的轮廓，从过滤器中“剪切”它，然后将 sourceGraphic 覆盖在顶部。
这是我的路
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="w3.org/2000/svg" version="1.1">
<g
transform="translate(-6.011591,-2.5668894)"
id="layer1">
<path
id="path1023"
d="M 13.279347,9.9492382 24.624743,191.02179 191.62901,204.63627 349.1031,36.27056 Z"
style="fill:#96b200;fill-opacity:0.26666667;stroke:#ffff00;stroke-width:13.58376789;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:40.75130608, 40.75130608;stroke-dashoffset:0;stroke-opacity:0.67336683" />
</g>
</svg>
这是我迄今为止提出的过滤器：
<filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
<feComposite in="SourceAlpha" in2="SourceAlpha" operator="arithmetic" k1="0" k2="8" k3="-0.5" k4="-0.5" x="0%" y="0%" width="100%" height="100%" result="composite"/>
<feColorMatrix type="matrix" values="1 0 0 0 1
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" x="0%" y="0%" width="100%" height="100%" in="composite" result="colormatrix1"/>
<feMorphology operator="dilate" radius="10 10" x="0%" y="0%" width="100%" height="100%" in="colormatrix1" result="morphology1"/>
<feGaussianBlur stdDeviation="10 10" x="0%" y="0%" width="100%" height="100%" in="morphology1" edgeMode="none" result="blur2"/>
<feMerge x="0%" y="0%" width="100%" height="100%" result="merge">
<feMergeNode in="blur2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
不经意间，这使源路径看起来很糟糕而且颜色变淡，我需要的是一种使用 feComposite 作为“模板”来在 feMerge 之前切出 feGaussianBlur 的方法，我只是不知道如何（或者如果有可能）
【问题讨论】：
-
尝试减小
<feMorphology operator="dilate"的半径（例如使用radius="1"）。同时减少stdDeviation。试试stdDeviation="2"。此外，您可能需要更改 viewBox 或将 svg 元素的溢出设置为可见，否则图像会被剪切。 -
@enxaneta 我想要过滤器的样子，我只想要在外面发光，所以需要一种方法在进行合并之前从模糊中“剪掉”sourceGraphic。这个 svg 只是一个例子，我不担心边缘被切断。
-
在这种情况下： 1：删除路径的笔划。 2.
<use>路径和描边<use>元素。 3. 将过滤器应用到<use> -
@enxaneta 我根本无法更改路径，它是生成的。我真正能做的就是添加过滤器。
标签： svg svg-filters