如何使用 SVG 實作這樣的目標？
uj5u.com熱心網友回復：
在這里，我有四個不同的“層”（<g>）與不同的元素。1）中間的三個部分。構成“填充”的是一個寬筆畫。2）邊緣的圓圈。好吧，它可以通過使用 JavaScript 進行優化，但對于示例來說，靜態版本就可以了。每個圓圈都可以有自己的填充顏色。3）三個部分的文本。4) 小圓圈的文字。
你可以看到我使用了很多變換。因為文本更容易將它們放在零件和小圓圈的中心。因此，文本的中心（中間）恰好位于圓圈的中心，然后我將文本旋轉兩次以使文本水平。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="400">
<g fill="none" stroke-width="30" stroke-dasharray="120 360" transform="translate(50 50)">
<circle r="15" stroke="SeaGreen" pathLength="360" />
<circle r="15" stroke="SteelBlue" pathLength="360" transform="rotate(120)" />
<circle r="15" stroke="DarkOrange" pathLength="360" transform="rotate(240)" />
</g>
<g transform="translate(50 50) rotate(10)">
<circle cx="38" r="6" fill="SeaGreen" transform="rotate(0)" />
<circle cx="38" r="6" fill="SeaGreen" transform="rotate(20)" />
<circle cx="38" r="6" fill="SeaGreen" transform="rotate(40)" />
<circle cx="38" r="6" fill="SeaGreen" transform="rotate(60)" />
<circle cx="38" r="6" fill="SeaGreen" transform="rotate(80)" />
<circle cx="38" r="6" fill="SeaGreen" transform="rotate(100)" />
<circle cx="38" r="6" fill="SteelBlue" transform="rotate(120)" />
<circle cx="38" r="6" fill="SteelBlue" transform="rotate(140)" />
<circle cx="38" r="6" fill="SteelBlue" transform="rotate(160)" />
<circle cx="38" r="6" fill="SteelBlue" transform="rotate(180)" />
<circle cx="38" r="6" fill="SteelBlue" transform="rotate(200)" />
<circle cx="38" r="6" fill="SteelBlue" transform="rotate(220)" />
<circle cx="38" r="6" fill="DarkOrange" transform="rotate(240)" />
<circle cx="38" r="6" fill="DarkOrange" transform="rotate(260)" />
<circle cx="38" r="6" fill="DarkOrange" transform="rotate(280)" />
<circle cx="38" r="6" fill="DarkOrange" transform="rotate(300)" />
<circle cx="38" r="6" fill="DarkOrange" transform="rotate(320)" />
<circle cx="38" r="6" fill="DarkOrange" transform="rotate(340)" />
</g>
<g font-size="3" text-anchor="middle" dominant-baseline="middle"
fill="white" transform="translate(50 50)">
<text transform="rotate(60) translate(15) rotate(-60)">SeaGreen</text>
<text transform="rotate(180) translate(15) rotate(-180)">SteelBlue</text>
<text transform="rotate(300) translate(15) rotate(-300)">DarkOrange</text>
</g>
<g font-size="2" font-weight="bold" font-family="sans-serif"
text-anchor="middle" dominant-baseline="middle" fill="white"
transform="translate(50 50)">
<text transform="rotate(30) translate(38) rotate(-30)">Dot01</text>
<text transform="rotate(50) translate(38) rotate(-50)">Dot02</text>
<text transform="rotate(170) translate(38) rotate(-170)">Dot03</text>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/523986.html
標籤：svg中风
上一篇：如何在手風琴的加減號圖示之間切換