我有這個代碼：
<div class="gBox">
<svg width="100%" height="300" fill="black" stroke="#9966cc" stroke-width="20" stroke-linecap="round">
<circle class="myCircle" transform="rotate(150 200 200)" cy="120" r="120" pathLength="170"/>
</svg>
</div>我如何定位 CSS 中的“myCircle”類以更改其屬性（將其與中心頁面對齊...？
uj5u.com熱心網友回復：
.myCircle{
display:flex;
justify-content:center;
}
uj5u.com熱心網友回復：
在這里，我有兩個將圓置于中心的示例。在這兩種情況下，<circle>都通過將cx和設定cy為 50%在 SVG 中居中。
在第一個示例中，我使用 viewBox 屬性<svg>來控制“縱橫比”。它將始終占據 100% 的寬度，因此高度將取決于寬度。
在第二個中，圓占據了 SVG 的整個空間，大小由 上的高度屬性控制<svg>。然后 SVG 是內容居中的 flex-box 的一部分。
<div class="gBox">
<svg viewBox="0 0 1000 260" fill="black" stroke="#9966cc" stroke-width="20" stroke-linecap="round">
<circle class="myCircle" cx="50%" cy="50%" r="120" pathLength="170"/>
</svg>
</div>
<div class="gBox" style="display:flex;justify-content:center;">
<svg viewBox="0 0 260 260" height="300" fill="black" stroke="#9966cc" stroke-width="20" stroke-linecap="round">
<circle class="myCircle" cx="50%" cy="50%" r="120" pathLength="170"/>
</svg>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/403055.html
標籤：
上一篇：反應打字稿滑鼠事件重疊