svg-text⽂本⽔平、垂直居中。⽂本垂直对齐⽅式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
svg{
width: 300px;
height: 150px;
}
path {
fill:#4682B4;
}
text {
stroke:#fff;
stroke-width: 1;
font-size: 20px;
text-anchor: middle;  /* ⽂本⽔平居中 */
dominant-baseline: middle; /* ⽂本垂直居中 */
}
</style>
css设置文字垂直居中</head>
<body>
<svg>
<path d="M150 0 L75 200 L225 200 Z" />
<text x='150'y='75'>1</text>
</svg>
<svg>
// dominant-baseline设置⽂本垂直对齐⽅式，text-before-edge设置⽂本在边缘，恰好完全显⽰<text dominant-baseline=text-before-edge>你好</text>
</svg>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。