时间戳

首页 > 解决方案 > 使用过滤器向 SVG 添加高亮颜色发光？

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

问题描述

我正在开发一个 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 突出显示颜色吗？有没有更简单的方法？

标签： javascripthtmlcsssvgsvg-filters

解决方案

您可以将 a 添加feFlood到过滤器并在 css 中设置泛色

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>

推荐阅读