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>
</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>
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。