SVG模式可以重叠而不是平铺吗？

Question

我正在尝试将AutoCAD填充图案（* .PAT）迁移到网站的SVG。

这些影线图案是defined as一系列线条，每条线条都有一个中心原点，角度，delta x和delta y，并且通过增加x和y以增加区域来重复它们（还有更多的选择，但我现在就不管它了。例如，这种模式：

45, 0, 0, 0, .125

从0,0开始生成一系列45度线，沿y轴增加0.125个单位：

我知道SVG支持模式，但这是我在SVG中最接近的地方：

<defs>
    <pattern id="Pattern" width=".2" height=".2" x="0.1" y="0.01">
        <line transform="rotate(45)" x1="0" y1="0" x2="100" y2="0" style="stroke:#000000;stroke-width:3;" />
    </pattern>
</defs>
<rect fill="url(#Pattern)" x="0" y="0" width="100" height="100" />

(Fiddle here)

不幸的是，模式的重复是通过平铺（如无缝背景图像）在SVG中实现的，而不是仅通过重复具有偏移的线来实现。这使得不可能有一条连续的对角线，你只能有一系列的线段。

有没有办法告诉SVG通过向现有画布添加形状（彼此重叠）而不是通过平铺来重复模式？

我唯一的另一个选择似乎是创建一个转换工具，它将循环并创建直到偏移原点位于画布之外。

Answer 1

不，模式不能重叠，但我认为你并不需要。如何使用patternTransform转换模式而不是转换线条。这在Firefox上看起来好多了，但我还没有尝试过任何其他UA。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <pattern patternTransform="rotate(-45)" id="Pattern" width=".2" height=".2" x="0.1" y="0.01">
            <line x1="0" y1="0" x2="100" y2="0" style="stroke:rgb(255,0,0);stroke-width:3;stroke-linecap:square;overflow:visible;" />
        </pattern>
    </defs>
    <rect fill="url(#Pattern)" x="0" y="0" width="100" height="100" style="overflow:visible"/>
</svg>