我想用重復的影像圖案填充一個矩形空間。影像以交錯的方形平鋪排列。相鄰的兩行在 x 方向上錯開正方形邊寬的一半。
如何使用 svg 中的模式元素來實作這一點？
這是我想要的結果圖
我試圖實作這種轉變，但沒有奏效。
<svg width=1000 height=1000>
<pattern id="bar" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect class="checker" x="0" width="100" height="100" y="0" fill="blue" />
<rect class="checker" x="100" width="100" height="100" y="0" fill="yellow" />
<rect class="checker" x="50" y="100" width="100" height="100" y="0" fill="red" stroke="red" />
<rect class="checker" x="150" y="100" width="100" height="100" y="0" fill="green" />
</pattern>
<rect width="100%" height="100%" fill=url(#bar)>
</svg>困難在于我的每個方塊都是一個影像，它不能被分成兩半。所以我找不到這個模式的最小元素。
先感謝您。
uj5u.com熱心網友回復：
像這樣的東西......您可以用影像替換路徑。
訣竅是將其中一個部分畫成兩個單獨的半部分，讓矩形圖案夾住每一半。
<svg>
<pattern id="p" patternUnits="userSpaceOnUse" width="80" height="80">
<path transform="translate(8,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(48,8)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(28,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(68,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
<path transform="translate(-12,48)" d="M17.37 17.07H6.57L4.24 24H3.01l8.23-24h1.52l8.23 24h-1.3zm-.39-1.13l-5-14.96-5.03 14.98h10.03Z"/>
</pattern>
<rect width="200" height="200" fill="url(#p)"/>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/480121.html
標籤：javascript html svg d3.js svg 模式
下一篇：用新資料重繪d3圖