使用 SVG 过滤器向 SVG 图像元素添加边框 [重复]

Posted 2023-03-28

【中文标题】使用 SVG 过滤器向 SVG 图像元素添加边框 [重复]

【英文标题】：Adding a border to an SVG image element with SVG filters [duplicate]

【发布时间】：2022-01-21 09:15:30

【问题描述】：

我正在寻找一种使用 SVG 过滤器而不是 CSS 为 SVG 图像元素添加边框的方法，但我不知道如何。

该文件应该是独立的，即它不适用于网页。我在 Notepad++ 中工作，打算开发一个用于批处理的脚本，图像可能具有不同的大小，并且具有不同的纵横比。

虽然我可以读取图像尺寸并在顶部放置一个矩形，但我认为可以使用 SVG 过滤器，正如 developer.mozilla.org 所讨论的那样。

下面是 MWE。

<svg
   
   
   viewBox="0 0 210 297"
   version="1.1"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">


  <defs>
    <filter id="image">
      <feImage xlink:href="abstract.jpg"/>
    </filter>
  </defs>


<rect   fill="DodgerBlue" />

  <rect x="10mm" y="10mm"  
      style="filter:url(#image);"/>

</svg>

MWE 中的示例图像，

图片来自Pexels，来自Pixabay

【参考方案1】：

您可以将图像添加到<image> 标记中并对其应用过滤器。在这个例子中，我放置了x="1" 和y="1" 以使图像与边缘保持距离，因为它可以切断图像与 SVG 边缘齐平的滤镜效果。

<svg viewBox="0 0 210 297" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">

  <filter id="outline">
    <feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="1"/>
    <feFlood flood-color="black"/>
    <feComposite in2="expanded" operator="in"/>
    <feComposite in="SourceGraphic"/>
  </filter>
  <image filter="url(#outline)" href="https://i.stack.imgur.com/cJwpE.jpg"   x="1" y="1"/>
</svg>

添加边框的技术取自 CSS Tricks 的 this 文章。