如何在SVG patternTransform中进行累积翻译？

Question

考虑以下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>

Here's the fiddle看到它的实际效果。

我试图通过某种偏移错开此模式中的虚线。上面的示例是水平线，但实线可以旋转到任何角度。偏移量应以与dasharray相同的单位定义。

将patternTransform="translate(x)"添加到pattern不起作用 - 它只是偏移整个重复模式的位置，而不是翻译每个重复行的位置累积时尚。将transform="translate(x)"添加到line也是如此。

添加patternTransform="skewX(x)"适用于水平线，patternTransform="skewY(x)"适用于垂直线，但它对于其他角度的线条根本不起作用。此外，skewX / skewY需要 angle 作为参数，我真的需要根据与dashArray相同的单位移动线。

编辑：没有任何人厌倦了血腥细节，我的最终目标是将AutoCAD孵化模式转换为SVG文件，我可以将其用作HTML中的背景图像。要了解这些模式的工作原理，请参阅此处的一些示例：

AutoCAD 2010 User Documentation（请注意左侧的三个链接 - 概述，虚线和多行）。

我希望使用SVG模式来做到这一点，但它看起来越来越像我以前必须回到先前使用循环来创建单独行的尝试。我试图避免这种情况，因为坦率地说，我已经忘记了过多的高中三角形并且获得足够的线条（以任意角度）来填充画布正在躲避我。

Answer 1

创建交错模式没有捷径可走。您需要自己绘制一组交错的线条，直到您可以通过重复（可能是倾斜或旋转）的矩形网格获得所需的效果。

要获得两条虚线的效果，并且虚线相互偏移，您的重复图块需要有两条线。

<?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>

更改说明：

1. 我已更改为userSpaceOnUse单位以定义图案图块。这可确保在绘制图案时定义的百分比与定义图块大小时绘制的百分比相同。 （用户空间是patternContentUnits的默认值。）样本中的矩形与用户空间的大小相同，因此没有区别，但如果更改矩形的大小，则会有所不同。

   如果你真的想要，那么这些线的间距与被填充的矩形的大小成正比，这是一个问题。您可以将patternUnits和patternContentUnits都更改为objectBoundingBox（patternUnits的默认值），但是您还必须相对于矩形大小定义所有笔触属性。

2. 我将瓷砖的高度加倍，因此它相当于两块原始瓷砖。一个瓷砖现在包括两条水平线。

3. 我稍微偏移了第一行，因此它不会被拼贴的边缘切掉（你只显示了半像素的笔划宽度，如果第二行显示差异很明显没有类似的剪辑）。

4. 我添加了第二行，短划线图案偏移，位于第一行以下的平铺高度的一半的垂直位置（1％+ 8.4％/ 2 = 5.2％）。

和@Robert Longson一样，我并不是100％肯定我明白你在问什么，所以如果这不是你想要的效果，请张贴你想要达到的效果。