svg 文字居中
时间: 2023-06-29 19:04:14 浏览: 74
要在 SVG 中居中文本,可以使用以下两种方法:
1. 使用 text-anchor 属性
text-anchor 属性指定文本的对齐方式。可以将其设置为 middle,使文本在水平方向上居中。
示例代码:
```
<svg viewBox="0 0 100 50">
<text x="50" y="30" text-anchor="middle">居中文字</text>
</svg>
```
2. 使用 textLength 和 lengthAdjust 属性
textLength 属性指定文本的长度,lengthAdjust 属性指定如何调整文本以适应指定的长度。
将 textLength 设置为 SVG 宽度的一半,将 lengthAdjust 设置为 spacingAndGlyphs,可以使文本在水平方向上居中。
示例代码:
```
<svg viewBox="0 0 100 50">
<text x="0" y="30" textLength="50" lengthAdjust="spacingAndGlyphs">居中文字</text>
</svg>
```
相关问题
svg绘制箭头,并插入文字在箭头的线段居中显示
要绘制带箭头的线段,并在线段上插入文字并居中,可以使用以下步骤:
1. 绘制线段
使用 SVG 的 `<line>` 元素来绘制线段,例如:
```
<line x1="50" y1="50" x2="150" y2="50" stroke="black" stroke-width="2" />
```
这条线段的起点是 (50,50),终点是 (150,50),线宽为 2。
2. 绘制箭头
在线段的终点处绘制箭头,可以使用 SVG 的 `<polygon>` 元素。例如:
```
<polygon points="140,50 150,45 150,55" fill="black" />
```
这个箭头是一个三角形,顶点在线段的终点处。箭头的大小和形状可以根据需要进行调整。
3. 插入文字
使用 SVG 的 `<text>` 元素来插入文字。例如:
```
<text x="100" y="50" text-anchor="middle" dominant-baseline="middle">居中对齐</text>
```
这段文字的位置坐标是 (100,50),水平和垂直方向上都居中对齐。
4. 整合
将线段、箭头和文字组合在一起。例如:
```
<svg width="200" height="100">
<line x1="50" y1="50" x2="150" y2="50" stroke="black" stroke-width="2" />
<polygon points="140,50 150,45 150,55" fill="black" />
<text x="100" y="50" text-anchor="middle" dominant-baseline="middle">居中对齐</text>
</svg>
```
这样就可以绘制带箭头的线段,并在线段上插入文字并居中了。
生成一个宽200px,高100px的svg图片
以下是一个宽 200px,高 100px 的 SVG 图片代码:
```html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
<rect width="100%" height="100%" fill="#ccc"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#fff">SVG</text>
</svg>
```
上述代码中,SVG 标签指定了 SVG 命名空间,width 和 height 属性设置了 SVG 图片的宽度和高度,rect 元素绘制了一个宽高与 SVG 图片相同的矩形,并填充灰色背景色,text 元素绘制了一个居中的白色文字,dominant-baseline 和 text-anchor 属性分别设置了文字的垂直和水平对齐方式。
你可以将上述代码保存为 .svg 文件,也可以直接将代码粘贴到 HTML 文件中使用。