添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

svg text align center

SVG(Scalable Vector Graphics)中的文本对齐方式可以使用text-anchor属性来控制。如果想要将文本水平居中对齐,可以将text-anchor属性设置为"middle",表示文本中心与定位点水平居中对齐。

以下是一个示例代码:

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" fill="#ccc" />
  <text x="100" y="50" text-anchor="middle" fill="#fff">居中对齐</text>
</svg>

在上述示例中,我们创建了一个矩形和一个文本元素。文本元素使用了text-anchor属性,将其设置为"middle",并且定位点(x, y)设置为(100, 50),即SVG元素中心点位置。这样,文本将会水平居中对齐于定位点。

需要注意的是,如果文本内容较长,可能会超出SVG元素的宽度。此时可以使用textLength属性来控制文本的长度,同时也需要设置lengthAdjust属性来指定文本是根据哪个属性进行调整。

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" fill="#ccc" />
  <text x="100" y="50" text-anchor="middle" fill="#fff" textLength="100" lengthAdjust="spacingAndGlyphs">较长的文本内容</text>
</svg>

在上述示例中,我们使用了textLength属性将文本长度设置为100个像素,并使用了lengthAdjust属性来指定文本是根据字符间距和字形来调整长度。这样,文本将会根据指定的长度进行自适应,并保持水平居中对齐于定位点。

  •