嘗試使用 svg rect 和路徑構建以下布局
下面是我嘗試過的代碼，
有人請建議或幫助用多邊形或任何其他方法做有效的方法嗎？面臨填充顏色問題，總矩形填充顏色并且路徑未顯示
4 kind of layouts with fill colors (A cell with 4 partitions or 3/2/1 partition)
我對 html 甚至 svg 都很陌生，添加一些想法來構建布局
uj5u.com熱心網友回復：
<polygon>在您的情況下，您是否使用or 并不重要 <path>。
路徑可以更簡潔，因為它們支持相對命令或僅水平/垂直的快捷方式（
下面是我的代碼
<table>
<tr>
<td>
DEMO
<svg height="50" width="50">
<polygon
points="0,0 0,50 50,50 50,0"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
>
<title>your title</title>
</polygon>
<text x="25" y="32" text-anchor="middle" fill="red" font-size="20">
1
<title>your title2222</title>
</text>
</svg>
</td>
<td>
<svg height="50" width="50">
<rect
width="50"
height="50"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
</svg>
<svg height="50" width="50">
<polygon
points="0,0 0,50 50,50 50,0"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
</svg>
</td>
<td>
<svg height="50" width="50">
<polygon
points="0,0 0,50 50,50"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
<polygon
points="0,0 50,0 50,50"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
</svg>
</td>
<td>
<svg height="50" width="50">
<polygon
points="25,0 0,0 0,50 25,25"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
<polygon
points="25,0 50,0 50,50 25,25"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
<polygon
points="0,50 50,50 25,25"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
</svg>
</td>
<td>
<svg height="50" width="50">
<polygon
points="0,0 0,50 25,25"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
<polygon
points="50,0 50,50 25,25"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
<polygon
points="0,50 50,50 25,25"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
<polygon
points="0,0 25,25 50,0"
style="fill: lightgray; stroke: darkgray; stroke-width: 2px"
/>
</svg>
</td>
</tr>
</table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/437795.html