我正在嘗試在 svg 中繪制一個帶有錐形漸變的圓形旋鈕。繼SO一些答案，我使用<foreignObject>了<div>含有background:conic-gradient。但是沒有出現在此之上的任何進一步繪圖。
<div style="position:relative;width:700;height:300">
<svg width="300" height="300" style="position:absolute;left:400;top:0">
<foreignObject width="200" height="200" x="50" y="50">
<div style="width:200;height:200;border-radius:50%;background:conic-gradient(#ddd 0%,#999 20%,#ddd 100%)"/>
</foreignObject>
<circle stroke="black" stroke-width="2" fill="none" cx="150" cy="150" r="90"/>
</svg>
</div>uj5u.com熱心網友回復：
CSS 中的所有值都必須有一個單位（如700px）。假定屬性中的值以像素為單位。
在示例中，我還將命名空間添加到了內容中<foreignObject>——這是一種很好的做法。
<div style="position:relative;width:700px;height:300px">
<svg width="300" height="300" style="position:absolute;left:400px;top:0">
<foreignObject width="200" height="200" x="50" y="50">
<div xmlns="http://www.w3.org/1999/xhtml" style="width:200px;height:200px;border-radius:50%;background:conic-gradient(#ddd 0%,#999 20%,#ddd 100%)"></div>
</foreignObject>
<circle stroke="black" stroke-width="2" fill="none" cx="150" cy="150" r="90"/>
</svg>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385007.html
上一篇：如何使這個SVG模式無縫？