Question

我从here中学到了使用 filter 为SVG中的 text 添加背景的方法。但是如何为文本添加边框？

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>

Answer 1

使用另一个稍大的过滤器创建边框。

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic"/>
    </filter>
    <filter x="-0.005" y="-0.01" width="1.01" height="1.02" id="border">
      <feFlood flood-color="black"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
<g filter="url(#border)">
  <text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
<g>
</svg>

看起来Chrome在同一元素上不支持多个过滤器，但是如果您使用的浏览器例如在Firefox中，您可以避免使用额外的<g>元素...

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic"/>
    </filter>
    <filter x="-0.005" y="-0.01" width="1.01" height="1.02" id="border">
      <feFlood flood-color="black"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <text filter="url(#solid) url(#border)" x="20" y="50" font-size="50">solid background</text>
</svg>

使用SVG过滤器为文本添加边框

1 个答案: