Html SVG代码中的div

堆栈溢出 我以前使用HTML，但现在我正在使用完整的SVG项目。我需要创建一个简单的布局：2个矩形，放置在一个有间隙的列中，每个矩形中有一个文本。我唯一能做的就是用

x

和

y

手动定位矩形和文本

问：在HTML（使用

div

和相对定位）中，文本是矩形的子对象，并在其中心对齐，我如何做到这一点

我就是这样做的：

<g>
    <rect height="40" width="100"/>
    <text alignment-baseline="baseline" x="30" y="33" font-family="Verdana" style="fill: #fff;" font-size="35">50</text>
</g>

50

---

提前谢谢。

SVG不像HTML那样是关于流布局的。如果希望在SVG中具有排版布局功能，可以使用SVG

foreignElement

将HTML嵌入到SVG中

<svg viewBox="...">
  <g>
    <foreignObject x="10" y="20" height="20" width="80">
      <div xmlns="http://www.w3.org/1999/xhtml"><p>this</p></div>
      <div xmlns="http://www.w3.org/1999/xhtml"><p>that</p></div>
    </foreignObject>
  </g>
</svg>

这个

那

然后在

div

s上使用CSS浮动、flexbox、宽度百分比或任何样式来实现所需的效果

---

编辑：foreignObject在IE11上不起作用，尽管SVG不像HTML那样关注流布局。如果希望在SVG中具有排版布局功能，可以使用SVG

foreignElement

将HTML嵌入到SVG中

<svg viewBox="...">
  <g>
    <foreignObject x="10" y="20" height="20" width="80">
      <div xmlns="http://www.w3.org/1999/xhtml"><p>this</p></div>
      <div xmlns="http://www.w3.org/1999/xhtml"><p>that</p></div>
    </foreignObject>
  </g>
</svg>

这个

那

然后在

div

s上使用CSS浮动、flexbox、宽度百分比或任何样式来实现所需的效果

---

编辑：foreignObject在IE11上不起作用，不过如果可以使用filter，可以在SVG上绘制“类似div”的文本框

但与原始html的

div

元素相比，这有点技术性，也没有什么用处，因为这种“类似div”的元素没有任何有用的特性，比如文本包装、灵活的边框样式、框阴影等等。因此，您应该将原始的

div

元素与

foreignObject

元素一起使用

示例代码：

/*颜色设置*/
.bgcolor{泛光颜色：黄色；}
.bordercolor{泛光颜色：橙色；}
/*过滤器设置*/
.divLike{filter:url（#divLike）；}
.divLike>text{filter:url（#text）；}

这是类似div的效果。

如果可以使用过滤器，可以在SVG上绘制“类似div”的文本框

但与原始html的

div

元素相比，这有点技术性，也没有什么用处，因为这种“类似div”的元素没有任何有用的特性，比如文本包装、灵活的边框样式、框阴影等等。因此，您应该将原始的

div

元素与

foreignObject

元素一起使用

示例代码：

/*颜色设置*/
.bgcolor{泛光颜色：黄色；}
.bordercolor{泛光颜色：橙色；}
/*过滤器设置*/
.divLike{filter:url（#divLike）；}
.divLike>text{filter:url（#text）；}

这是类似div的效果。

您已经尝试了什么？@benM我已经在问题中添加了我的版本。您已经尝试了什么？@benM我已经在问题中添加了我的版本。谢谢！但是，如果创建布局的唯一方法是手动定位所有元素，那么它怎么能如此灵活呢？SVG用于地图、图表、矢量背景、图标/先锋、游戏内容等，而不是用于布局或设计用于替换HTML（为什么已经有CSS和HTML了）谢谢！但是，如果创建布局的唯一方法是手动定位所有元素，那么它怎么能如此灵活呢？SVG用于地图、图表、矢量背景、图标/视频、游戏内容等，而不是用于布局或用于替换HTML（为什么已经有了CSS和HTML）