SVG <foreignObject> prevents further drawing-CodePudding

I'm trying to draw a circular knob with a conical gradient in svg. Following some answers in SO, I'm using <foreignObject> with a <div> containing a background:conic-gradient. But any further drawing on top of this does not appear.

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

CodePudding user response：

All values in CSS has to have a unit (like 700px). Values in attributes are assumed to be in pixel.

In the example I also added the namespace to the content of <foreignObject> -- that is good practice.

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