SVG:矩形内的文本 [英] SVG: text inside rect

问题描述

我想在SVG rect中显示一些文本 .有可能吗?

I want to display some text inside SVG rect. Is it possible?

我尝试了

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red">
      <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
    </rect>
  </g>
</svg>

但是它不起作用.

推荐答案

这是不可能的.如果要在rect元素内显示文本，则应将它们都放在一个组中，且text元素应位于rect元素之后(这样它会显示在顶部).

This is not possible. If you want to display text inside a rect element you should put them both in a group with the text element coming after the rect element ( so it appears on top ).

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
</svg>

这篇关于SVG:矩形内的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！