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>

是否可以轮换SVG过滤器中的feTurbulence？

1 个答案: