怎样让svg中的<text>在一个固定的<rect>中居中
时间: 2023-12-11 08:03:55 浏览: 47
要让 `<text>` 在一个固定的 `<rect>` 中居中,需要设置 `<text>` 的 `x` 和 `y` 属性。假设你要让 `<text>` 在一个宽为 100,高为 50 的 `<rect>` 中居中,你可以按照以下方法设置:
首先,设置 `<rect>` 的 `x`、`y`、`width` 和 `height` 属性:
```html
<rect x="50" y="50" width="100" height="50" />
```
然后,在 `<rect>` 中添加 `<text>` 元素,并设置 `x` 和 `y` 属性为 `<rect>` 的中心点:
```html
<rect x="50" y="50" width="100" height="50">
<text x="75" y="75">Centered Text</text>
</rect>
```
注意,上面的 `x` 和 `y` 均为 75,这是因为要让 `<text>` 在 `<rect>` 中居中,需要把 `<text>` 的中心点与 `<rect>` 的中心点重合,也就是 `x` 和 `y` 均为 `<rect>` 的中心点坐标。
另外,还可以通过设置 `<text>` 的 `text-anchor` 属性来控制文本的水平对齐方式,比如设置为 `middle` 可以让文本水平居中对齐:
```html
<rect x="50" y="50" width="100" height="50">
<text x="75" y="75" text-anchor="middle">Centered Text</text>
</rect>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)