使用过滤器向 SVG 添加高亮颜色发光？答案

【问题标题】：Using a filter to add highlight-color glow to SVG?使用过滤器向 SVG 添加高亮颜色发光？
【发布时间】：2021-05-07 01:26:32
【问题描述】：

我正在开发一个 SVG 画板，我非常想在选定的 SVG 对象周围显示一个轮廓。我已经有了以下内容：

<svg width="0" height="0">
    <filter id="outline">
        <feMorphology operator="dilate" radius="1" in="SourceGraphic" result="glow" />
        <feComposite operator="over" in="glow" in2="SourceGraphic"></feComposite>
    </filter>
</svg>

path.selected { filter: url(#outline); }

这会在路径周围创建一个硬像素轮廓，但“发光”始终与路径颜色相同。我可以使用 feColorMatrix 将其重新着色为 css 突出显示颜色吗？有没有更简单的方法？

【问题讨论】：

标签： javascript html css svg svg-filters

【解决方案1】：

您可以在过滤器中添加feFlood，并在css中设置flood-color

svg{color:red}
feFlood{flood-color:currentColor;}

<svg>
  <filter id="outline">
    <feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="1" />
    <feFlood result="color" />
    <feComposite in="color" in2="expanded" operator="in" />
    <feComposite in="SourceGraphic" />
  </filter>

  <rect x="10" y="10" width="100" height="50" fill="gold" filter="url(#outline)" />
</svg>

【讨论】：