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>

SVG <foreignObject> 阻止进一步绘制

SVG <foreignObject> prevents further drawing

html

svg