如何实现SVG文本在shape-inside对象内的垂直对齐？

问题描述 #

使用shape-inside属性将SVG文本包裹在圆形等指定形状内时，通过text-align: center可实现文本水平居中，但自动换行后的整个文本块无法通过dominant-baseline、vertical-align、alignment-baseline等属性实现相对于形状的垂直对齐，需纯SVG解决方案（禁止使用JavaScript）。

修正与解决方案 #

首先纠正代码中的基础错误：SVG的<circle>元素无x/y属性，需使用标准的cx（中心X坐标）、cy（中心Y坐标）定义形状位置，否则形状布局会出现偏差。

针对垂直居中需求，可通过以下两种纯SVG方法实现：

方法1：结合坐标定位与变换平移

将<text>元素的x/y设为形状中心坐标，配合text-anchor: middle保证水平居中，再通过transform平移文本块调整垂直位置，实现整体居中：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
  <defs>
    <!-- 修正圆形属性为cx/cy定义中心 -->
    <circle cx="60" cy="60" r="50.0" id="border_circle"></circle>
  </defs>

  <!-- 绘制可见圆形边框 -->
  <circle cx="60" cy="60" r="50.0" style="fill: white; stroke: black" />
  <!-- 设置文本中心对齐并平移调整垂直位置 -->
  <text x="60" y="60" xml:space="preserve" 
        style="font-size:12px; shape-inside:url(#border_circle); text-align: center; text-anchor: middle"
        dominant-baseline="middle"
        transform="translate(0, -25)">
    <tspan>A long text wraps inside a circle</tspan>
  </text>
</svg>

方法2：使用tspan的dy属性调整偏移

通过嵌套<tspan>并设置dy属性，精准调整文本块的垂直偏移量，配合文本元素的中心定位实现居中：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">
  <defs>
    <circle cx="60" cy="60" r="50.0" id="border_circle"></circle>
  </defs>

  <circle cx="60" cy="60" r="50.0" style="fill: white; stroke: black" />
  <text x="60" y="60" xml:space="preserve" 
        style="font-size:12px; shape-inside:url(#border_circle); text-align: center; text-anchor: middle"
        dominant-baseline="middle">
    <!-- dy值根据文本块高度估算，-1.5em适配示例文本 -->
    <tspan dy="-1.5em">A long text wraps inside a circle</tspan>
  </text>
</svg>

注意事项 #

shape-inside属性已被CSS标准废弃，现代浏览器普遍不再支持该属性。若需兼容现代环境，建议在HTML中使用shape-outside结合浮动布局，或SVG的<foreignObject>嵌入HTML文本并配合CSS Shapes实现类似效果；若必须依赖shape-inside，上述方法为可行的纯SVG解决方案。

内容的提问来源于stack exchange，提问作者performancematters