d3.js - 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>