SVG <foreignObject> 阻止进一步绘制

【问题标题】：SVG <foreignObject> prevents further drawingSVG <foreignObject> 阻止进一步绘制
【发布时间】：2022-01-16 04:48:20
【问题描述】：

我正在尝试在 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>

【问题讨论】：

对 div 使用像素：<div style="width:200px; height:200px;

标签： html svg

【解决方案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>

【讨论】：

关键的区别，出于我不明白的原因，不是“px”而是结尾</div>。
@Chrystomath 哦，结尾</div>。 div元素不能是<img />或<input />这样的空元素，所以div必须被那个标签封闭。