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

Question

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

这些填充图案是defined as 一系列线，每条线都有一个中心原点、角度、delta x 和 delta y，它们通过将 x 和 y 递增 delta 来填充区域（有更多选择，但我暂时不考虑）。例如，这种模式：

45, 0, 0, 0, .125

生成一系列 45 度线，从 0,0 开始，沿 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>