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

我有一个SVG

，它使用

创建如下纹理：

我通过在

中使用较大的X基频和较小的Y基频来创建这样的垂直纹理。我也可以反过来做同样的技巧来获得水平纹理。但我真的希望能够创建一个对角线纹理，如下所示：

但是我不知道如何在过滤器中旋转

的输出

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

编辑：根据请求，垂直纹理过滤器（在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在下面发布的歪斜解决方案相关），我想将此过滤器应用于具有任意填充的对象。因此，它可能应用于绿色对象，如图所示，但也可能应用于红色对象等。

您可以使用置换贴图旋转对象，但要对所需的置换贴图进行反向工程非常困难。你可以很容易地扭曲事物。无论哪种情况，结果都不是非常好，但这是可能的

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

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

您是否在最终选择上尝试了

.attr（“变换”、“旋转（45）”）

。@pmkro:transform在

或

上不执行任何操作。如果我把它放在填充的物体上，整个物体会旋转，而不仅仅是纹理。嗯，好的。我在这附近找到了一些。也许可以试试

direction

属性。@pmkro:

direction

属性对

feTurbulence

或

filter

都没有任何作用。非常感谢这个答案，我从弄清楚发生了什么事情中学到了很多。这个答案的问题是，如果我想对任意对象应用过滤器，倾斜是一个问题——你真的需要有一个更大的填充，你可以倾斜，然后向后置换，仍然和要填充的对象一样大。但也许我能想出如何用它来满足我的需要。（如果我在未来几天内看不到更好的解决方案，我会将此标记为最佳解决方案。）