SVG <foreignObject> 可防止进一步绘制

Question

我试图在svg中绘制一个具有圆锥形梯度的圆形旋钮。根据SO中的一些答案，我使用<foreignObject>和包含background:conic-gradient的<div>。但在此基础上的任何进一步描绘都没有出现。

<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>

Answer 1

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>