怎么让svg里的g居中显示
时间: 2024-05-15 17:19:20
浏览: 213
可以使用CSS的flex布局来让svg中的g元素居中显示。具体实现步骤如下:
1. 给svg元素添加样式,设置display为flex,justify-content和align-items都为center,让svg元素居中显示。
svg {
display: flex;
justify-content: center;
align-items: center;
2. 给g元素添加样式,设置transform为translate,将g元素在svg中居中显示。
transform: translate(50%, 50%);
其中,translate的参数分别为x轴和y轴的偏移量,设置为50%即可将g元素居中显示。
完整的代码示例如下:
svg {
display: flex;
justify-content: center;
align-items: center;
transform: translate(50%, 50%);
```
相关问题
el-container 如何居中显示svg
要使el-container居中显示svg,可以使用flex布局。将el-container设置为flex容器,并使用justify-content和align-items属性将其内容居中对齐。
例如,下面的代码将el-container居中显示svg:
```html
<template>
<div class="container">
<el-container class="center">
```
svg 文字居中
要在 SVG 中居中文本,可以使用以下两种方法:
1. 使用 text-anchor 属性
text-anchor 属性指定文本的对齐方式。可以将其设置为 middle,使文本在水平方向上居中。
示例代码:
<svg viewBox="0 0 100 50">
<text x="50" y="30" text-anchor="middle">居中文字</text>
```