SVG 过滤器中的 feTurbulence 可以旋转吗？

Question

我有一个 SVG <filter>，它使用 <feTurbulence> 创建如下纹理：

我通过在<feTurbulence> 中使用较大的 X 基频和较小的 Y 频率来创建这样的垂直纹理。我可以反过来做同样的技巧来获得水平纹理。但我真的很想能够创建一个对角线纹理，像这样：

但我不知道如何在过滤器中旋转<feTurbulence> 的输出。

我考虑了一个相当笨拙的解决方法：我可以创建一个比我的目标图像更大的图像，用垂直纹理填充它，将图像旋转到我想要的角度，然后将其裁剪以适合我的目标图像。但我肯定希望有更直接的方法来做到这一点！

编辑：根据要求，垂直纹理过滤器（在 d3.js 代码中，但应该很明显）。这是改编自 Inkscape 中的胶片颗粒过滤器：

    filter = mapParams.defs
    .append('filter')
    .attr('x', '0%')
    .attr('y', '0%')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('filterUnits', 'objectBoundingBox')
    .attr('id', 'TreeTexture');
filter.append('feTurbulence')
        .attr('type', 'fractalNoise')
        .attr('baseFrequency', '1 0.1')
        .attr('numOctaves', '3')
    .attr('result','fpr1');
// De-saturate to B&W
filter.append('feColorMatrix')
    .attr('type', 'saturate')
    .attr('values','0.0')
    .attr('result', 'fpr2')
    .attr('in','fpr1');
filter.append('feComposite')
    .attr('operator', 'arithmetic')
    .attr('in','SourceGraphic')
    .attr('in2','fpr2')
    .attr('k1', '0')
    .attr('k2', '1')
    .attr('k3', '1.5')
    .attr('k4', '-0.4')
    .attr('result', 'fpr3');
filter.append('feColorMatrix')
    .attr('type', 'saturate')
    .attr('values','0.85')
    .attr('result', 'fpr4')
    .attr('in','fpr3');
filter.append('feBlend')
    .attr('mode', 'normal')
    .attr('in','fpr4')
    .attr('in2','SourceGraphic')
    .attr('result', 'fpr5');
filter.append('feComposite')
    .attr('operator', 'in')
    .attr('in','fpr5')
    .attr('in2','SourceGraphic')
    .attr('result', 'fpr6');

编辑：为了澄清（因为它与 Michael Mullany 在下面发布的倾斜解决方案相关），我想将此过滤器应用于具有任意填充的对象。所以它可能被应用到一个绿色的物体上，如这里所示，但也可能被应用到红色的物体上，等等。

Answer 1

您可以使用置换贴图旋转物体，但很难对您需要的置换贴图进行逆向工程。你可以很容易地歪曲事情。两种情况下的结果都不是很好，但这是可能的。

如果您出于其他原因使用过滤器，我建议您在一个 SVG 中创建所需的纹理，并通过主文档中的 feImage 引用它。如果您不需要滤镜 - 只需将其用作常规图像填充即可。

但为了好玩 - 以下是您如何在过滤器中扭曲内容。作为快捷方式，我使用直接对象引用将渐变对象拉入主过滤器 - 但为了支持跨浏览器（又名 firefox） - 您需要将其设为单独的 SVG 并将其作为数据 URI 内联

<svg height="400px" width="400px" color-interpolation-filters="linearRGB">
  <defs> 
    <linearGradient id="disred" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="black" />
      <stop offset="100%" stop-color="red"/>
    </linearGradient>
    <filter id="texture" x="-50%" y="-50%" width="200%" height="200%">
      <feTurbulence type="fractalNoise" baseFrequency="1 0.1" numOctaves="3"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0
                                           0 1 0 0 0 
                                           0 0 0 0 0 
                                           0 0 0 1 0" result="texture2"/>
      <feImage xlink:href="#redDisplace"/>
      <feDisplacementMap in="texture2" scale="-60" xChannelSelector="R"/>
      <feOffset dy="-60" dx="0"/>
      <feComposite operator="in" in2="SourceGraphic"/>
      
    </filter>
    
      <rect id="redDisplace" x="0" y="0" width="200" height="200" fill="url(#disred)"/>
    
  </defs>

  <rect x="0" y="0" width="100" height="100" filter="url(#texture)"/>
</svg>