我想圍繞以下 SVG 組件的軸旋轉指標。
我怎么能做到這一點。我已經用以下方法嘗試過，但它不會圍繞它旋轉。
<g id="Group 1" transform = "translate(100, 100) rotate(45 0 0)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd" d="M302.248 291.371L230.862 209.521L212.309 230.492L302.248 291.371Z" fill="#72A1E7"/>
</g>
uj5u.com熱心網友回復：
更容易：
- 如果它可以以 0,0 為中心旋轉。
- 如果您知道起點的角度，請計算針的角度。
因此，您可以像這樣畫針，短線的中間在 0,0（是的，它不在畫布上），然后指向 6 點鐘：
svg {
background-color: silver;
}<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd"
d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>現在針可以移動到影像的中心（或任何地方）：
svg {
background-color: silver;
}<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1" transform="translate(100 100)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd"
d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>旋轉可以用不同的方式完成，但在這里我將針/路徑<path>本身旋轉到儀表的想象零點，然后使用 group 元素<g>給儀表一個“值”。所以，這里的計算是儀表占據 300 度，零值在 30 度（從 6 點鐘開始），然后最大值在 330 度。這里的值為 1/3 = 100 度。
svg {
background-color: silver;
}<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle transform="rotate(120 100 100)" cx="100" cy="100" r="85"
stroke="blue" stroke-width="5" stroke-dasharray="300 360" pathLength="360"
fill="none" />
<g id="Group 1" transform="translate(100 100) rotate(100)">
<path id="Point" transform="rotate(30)" fill-rule="evenodd"
clip-rule="evenodd" d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516169.html
標籤：svg
上一篇：如何用相反的背景顏色填充SVG？