使用 SVG 过滤器向 SVG 图像元素添加边框

Question

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

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

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

下面是一个MWE。

<svg
   width="210mm"
   height="297mm"
   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 width="100%" height="100%" fill="DodgerBlue" />

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

</svg>

MWE中的示例图片，

图片来自 Pexels from Pixabay

Answer 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" height="200" width="200" x="1" y="1"/>
</svg>

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

使用 SVG 过滤器向 SVG 图像元素添加边框

Adding a border to an SVG image element with SVG filters

svg

svg-filters