SVG 文字居中整理

一、基于SVG文档的文字居中

text-anchor: middle; //水平方向居中

dominant-baseline: middle; //垂直居中

1.使用内联样式配置居中

<svg style=' border:1px solid blue;width:300px;height:300px;'>
    <path d='M0,150 300,150  M150,0 L150,300 ' fill='none' stroke='green'/>
    <text fill='red' x='150' y='150' 
    style='dominant-baseline:middle;text-anchor:middle;'>
        中文内容,中文内容
    </text>
</svg>

2.css中配置居中

svg {
     
    width: 300px;
    height: 150px;
    border:1px solid red;
}

path {
     
    fill: #4682B4;
}

text {
     
    stroke: #fff;
    stroke-width: 1;
    font-size: 20px;