重置 svg 模式原点

Question

我正在尝试在 svgrect的每一端添加一个三角形图案。其中rect可以是不同的宽度。问题在于，根据rect的开始和结束位置，形态可以从三角形的中间开始。我需要它总是从头开始。 我尝试设置patternUnits，弄乱主 svg 和模式的viewBox。

此示例显示第 2 条带和第 3 条带具有错误对齐的图案

<svg width="346" height="100">
<defs>
<pattern x="0" y="0" id="zigZag" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
<pattern x="0" y="0" id="zagZig" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse" patternTransform="rotate(180)">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
</defs>
<rect width="346" height="100" rx="10" style="fill: rgba(255, 101, 35, 0.75);"></rect>
<rect x="14" width="16" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="12" width="2" height="100" fill="url(#zagZig)"></rect>
<rect x="30" width="2" height="100" fill="url(#zigZag)"></rect>
<rect x="51" width="50" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="49" width="2" height="100" fill="url(#zagZig)"></rect>
<rect x="101" width="2" height="100" fill="url(#zigZag)"></rect>
<rect x="121" width="80" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="119" width="2" height="100" fill="url(#zagZig)"></rect>
<rect x="201" width="2" height="100" fill="url(#zigZag)"></rect>
</svg>

此示例表明将 x 位置更改为偶数可以正确对齐模式。

<svg width="346" height="100">
<defs>
<pattern x="0" y="0" id="zigZag" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
<pattern x="0" y="0" id="zagZig" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse" patternTransform="rotate(180)">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
</defs>
<rect width="346" height="100" rx="10" style="fill: rgba(255, 101, 35, 0.75);"></rect> 
<rect x="14" width="16" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="12" width="2" height="100" fill="url(#zagZig)"></rect>
<rect x="30" width="2" height="100" fill="url(#zigZag)"></rect>
<rect x="50" width="50" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="48" width="2" height="100" fill="url(#zagZig)"></rect>
<rect x="100" width="2" height="100" fill="url(#zigZag)"></rect>
<rect x="120" width="80" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="118" width="2" height="100" fill="url(#zagZig)"></rect>
<rect x="200" width="2" height="100" fill="url(#zigZag)"></rect>
</svg>

如何在不必更改由数据驱动的 x 位置的情况下获得这种对齐方式？

Answer 1

我认为没有一种简单的方法可以让模式在这里按照你想要的方式工作。 反正不是自动的。

一种解决方案是为奇坐标情况创建模式的替代版本。请参阅以下示例中的zigZagOdd和zagZigOdd。

<svg width="100%" viewBox="0 0 346 100">
<defs>
<pattern x="0" y="0" id="zigZag" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
<pattern x="1" y="0" id="zigZagOdd" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
<pattern x="0" y="0" id="zagZig" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse" patternTransform="rotate(180)">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
<pattern x="1" y="0" id="zagZigOdd" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse" patternTransform="rotate(180)">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
</defs>
<rect width="346" height="100" rx="10" style="fill: rgba(255, 101, 35, 0.75);"></rect>
<rect x="14" width="16" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="12" width="2" height="100" fill="url(#zagZig)"></rect>
<rect x="30" width="2" height="100" fill="url(#zigZag)"></rect>
<rect x="51" width="50" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="49" width="2" height="100" fill="url(#zagZigOdd)"></rect>
<rect x="101" width="2" height="100" fill="url(#zigZagOdd)"></rect>
<rect x="121" width="80" height="100" style="fill: rgb(255, 101, 35);"></rect>
<rect x="119" width="2" height="100" fill="url(#zagZigOdd)"></rect>
<rect x="201" width="2" height="100" fill="url(#zigZagOdd)"></rect>
</svg>

但是，如果您的目标只是减小 SVG 文件大小并使其易于应用图案条纹，那么您可以使用其他方法。 我推荐<use>元素。

<svg width="100%" viewBox="0 0 346 100">
<defs>
<pattern x="0" y="0" id="fringe" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
<polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
</pattern>
<rect id="zigZag" width="2" height="100" fill="url(#fringe)"/>
<rect id="zagZig" width="2" height="100" fill="url(#fringe)" transform="scale(-1,1)"/>
</defs>
<rect width="346" height="100" rx="10" style="fill: rgba(255, 101, 35, 0.75);"></rect>
<rect x="14" width="16" height="100" style="fill: rgb(255, 101, 35);"></rect>
<use x="14" xlink:href="#zagZig"/>
<use x="30" xlink:href="#zigZag"/>
<rect x="51" width="50" height="100" style="fill: rgb(255, 101, 35);"></rect>
<use x="51" xlink:href="#zagZig"/>
<use x="101" xlink:href="#zigZag"/>
<rect x="121" width="80" height="100" style="fill: rgb(255, 101, 35);"></rect>
<use x="121" xlink:href="#zagZig"/>
<use x="201" xlink:href="#zigZag"/>
</svg>