无缝平铺的 SVG feTurbulence 过滤器答案

【问题标题】：Seamlessly tileable SVG feTurbulence Filter无缝平铺的 SVG feTurbulence 过滤器
【发布时间】：2020-05-27 21:26:01
【问题描述】：

如何使用feTurbulence 过滤器或过滤器组合在 SVG 中创建无缝平铺噪声？

我想要与 Gimp 的 Filters/Render/Noise/Solild Noise... 类似的结果。

来自 Gimp：

【问题讨论】：

feTurbulence 有一个属性stitchTiles - 只需使用stitchTiles="stitch" 就会产生平铺噪音。
@MichaelMullany 你知道在 InkScape 中处理这个stitchTiles="stitch" 属性而不需要对 SVG 树进行低级编辑的方法吗？
在 InkScape 错误中找到此参考：UI for setting stitchTiles attribute (feTurbulence) missing in the filters editor 目标为 0.93，不幸的是，AFAIK 仍然不可用。
Inkscape 中的过滤器编辑器让 AF 感到困惑——我的建议是学习如何手写过滤器。它们并不难学。
您的问题似乎是关于如何使用 Inkscape 而不是如何编写标记。它实际上确实需要“在低级别编辑 SVG 树”才能成为这里的主题。

标签： svg inkscape svg-filters

【解决方案1】：

正如 Michael Mullany 所说：可以使用 stitchTiles="stitch" 属性来完成。

关于用 Inkscape 处理这个属性，我在 InkScape Bugs 中找到了这个参考： UI for setting stitchTiles attribute (feTurbulence) missing in the filters editor。不幸的是，该功能将使用 InkScape v0.93 实现，（AFAIK 仍然不可用）

这是一个无缝平铺 SVG feTurbulence 的示例，带有 stitchTiles="stitch" 属性：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" height="512" width="512">
  <defs>
    <filter x="0" y="0" width="100%" height="100%" id="myStichedNoise" style="color-interpolation-filters:sRGB;">
      <feTurbulence type="fractalNoise" stitchTiles="stitch" numOctaves="4" baseFrequency="0.0125"/>
      <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" />
    </filter>
    <pattern id="myPattern" width="33.33333%" height="33.33333%">
      <rect width="33.33333%" height="33.33333%" style="color:#000000;filter:url(#myStichedNoise)"/>
    </pattern>
  </defs>
  <rect fill="url(#myPattern)" width="100%" height="100%"/>
</svg>

【讨论】：