如何在SVG模式转换中进行累积转换？

考虑以下SVG：

<?xml version="1.0" standalone="no"?>
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="Pattern0" patternTransform="skewX(5)" x="0" y="0" width="0.1" height="0.042">
      <line x1="0" x2="1200" y1="0" y2="0" stroke-dasharray="25,25" style="stroke:#000000;stroke-width:1" />
    </pattern>
  </defs>
  <rect fill="url(#Pattern0)" width="600" height="600" style="stroke:#0000FF;stroke-width:1" />
</svg>

看看它在起作用

我试着将这个图案中的虚线错开一些偏移量。上面的示例是一条水平线，但实际线可以旋转到任何角度。偏移量的定义单位应与

dasharray

相同

将

patternTransform=“translate（x）”

添加到

模式

不起作用——它只是偏移整个重复模式的位置，而不是以累积方式平移每个重复行。在

行中添加
transform=“translate（x）”
也是如此

添加一个
patternTransform=“skewX（x）”
适用于水平线，而
patternTransform=“skewY（x）”
适用于垂直线，但它对其他角度的线根本不起作用。另外，skewX/skewY需要一个角度作为参数，我真的需要根据与
dashArray
相同的单位移动线

编辑：我的最终目标是将AutoCAD填充图案转换为SVG文件，作为HTML中的背景图像，而不是让任何人对这些血淋淋的细节感到厌烦。要了解这些模式的工作原理，请参见以下示例：

（注意左边的三个链接——概述、虚线和多行）

我很想使用SVG模式来实现这一点，但它看起来越来越像是我必须回到以前使用循环来创建单个行的尝试。我试图避免这种情况，因为坦率地说，我已经忘记了太多的高中三角游戏，我无法获得足够的线条（以任意角度）来填充画布。
没有捷径可以创建交错模式。您需要自己绘制一组交错线，直到可以通过重复（可能倾斜或旋转）矩形网格获得所需效果为止

要获得两条虚线的效果，虚线相互偏移，重复平铺需要有两条线

<?xml version="1.0" standalone="no"?>
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="Pattern0" patternUnits="userSpaceOnUse"
             x="0" y="0" width="100%" height="8.4%" 
             style="stroke:#000000;stroke-width:1;
                    stroke-dasharray:25,25; " >

      <line x1="0" x2="100%" y1="1%" y2="1%" />
      <line x1="0" x2="100%" y1="5.2%" y2="5.2%" 
            style="stroke-dashoffset:25" />

    </pattern>
  </defs>
  <rect fill="url(#Pattern0)" width="600" height="600" 
        style="stroke:#0000FF;stroke-width:1" />
</svg>




更改说明：

我已更改为
userSpaceOnUse
units来定义图案平铺。这确保了在绘制图案时定义的百分比与在定义平铺大小时绘制的百分比的解释方式相同。（用户空间是
patternContentUnits
的默认值）示例中的矩形与用户空间的大小相同，因此不会产生任何差异，但如果更改矩形的大小，则会产生差异

如果您真的希望线条的间距与所填充矩形的大小成比例，这是一个问题。您可以将
patternUnits
和
patternContentUnits
更改为
objectBoundingBox
（默认值为
patternUnits
），但随后您还必须定义与矩形大小相关的所有笔划属性

我把瓷砖的高度增加了一倍，所以它相当于你原来的两块瓷砖。一个平铺现在包括两条水平线

我已经稍微偏移了第一行，这样它就不会被平铺的边缘切断（只显示了半像素的笔划宽度，如果第二行没有进行类似的剪裁，则差异会变得很明显）

我已经添加了第二条线，带有虚线图案偏移，垂直位置是第一条线下方瓷砖高度的一半（1%+8.4%/2=5.2%）

比如@Robert Longson，我不能100%肯定我理解你的要求，所以如果这不是你想要的效果，请发布一张你想要达到的效果的图。
也许你可以画一张你的意思的图，因为“累积翻译”对我来说一点都不清楚。@Robert Longson，链接小提琴中的第二个SVG是我的目标。但是，由于它依赖于skewX，因此它仅适用于水平线，并且也以角度表示，而不是以与dashArray.FWIW相同的单位表示。该文件无效，因为它有多个相同的id值。所有案例在Firefox上的显示都是相同的，根据规范，这是正确的做法。你不只是想要patternTransform=“rotate（30）skewX（25）”那么？我更新了fiddle以获得唯一的ID，只是为了示例（我使用的是Chrome）。我绝对不想使用“rotate（30）skewX（25）”，它会扭曲直线的方向，而不是调整直线上虚线的偏移。skewX（）适用于水平线的事实并没有真正帮助我，因为我需要能够以任何角度偏移直线的虚线图案。谢谢@AmeliaBR。我的最终目标是使用SVG复制AutoCAD“*.PAT”填充图案。这些定义了一系列重复线，每个重复线具有可选的划线图案、偏移和角度。我不想把主要问题隐藏在处理这种文件格式的细节中，这就是为什么我试图以这种方式创建模式的原因并不明显。为了清楚起见，我将编辑我的问题，以防有人想深入了解更多细节。