Question

我正在尝试将一个平铺图像显示在过滤器中并正确地平铺其应用的任何其他内容，无论其他项目在何处绘制，AKA平铺图像应以某种方式全局修复。

svg复制问题（我知道你可能会使用模式填充通常只是为了复制我遇到的问题）：

<svg width="700" height="700">
  <defs>
    <filter width="1" height="1" id="stripe">
        <feImage xlink:href="http://i.imgur.com/T5fsm0U.png" height="160" width="80" result="patternimage"></feImage>
        <feTile in="patternimage"></feTile>
    </filter>
  </defs>
  <rect x="0" y="0" width="300" height="400" filter="url(#stripe)"></rect>
  <rect x="160" y="10" width="300" height="400" filter="url(#stripe)"></rect>
  <rect x="200" y="0" width="200" height="200" filter="url(#stripe)"></rect>
</svg>

codepen： http://codepen.io/anon/pen/iEkmL

我不关心是否使用模式而不是feTile，只要其输出可用作过滤步骤。我觉得答案与filterUnits或primitiveUnits有关，但我真的不明白如何使用它们来解决问题。

Answer 1

我不确定你能用过滤器做到这一点。过滤器与它们应用的元素或多或少相关。如果您尝试在“全局”（用户）空间中绘制图像，它可能在原始过滤器子区域中不可见，并且不会被平铺。

你可以用模式做到这一点。您只需使用patternUnits="userSpaceOnUse"。

http://codepen.io/anon/pen/Brcox

然后，您可以使用图案填充作为过滤器的输入，如果这是您需要做的。

如何排列通过SVG过滤器应用的这些图块？

1 个答案: