怎么在svg里设置文字的center位置

发布网友发布时间：2023-02-13 22:07

共2个回答

热心网友时间：2023-10-03 19:51

给你做了一个小demo。

<html>

    <head>
        <style>
        div { width: 300px; height: 150px; background: #f06; font: bold 150% sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.5); overflow: hidden; resize: both; color: white; }
        svg { width: 100%; height: 100%; pointer-events: none; }
        text { text-anchor: middle; pointer-events: auto; fill: currentColor; }
        p { font: italic 100% Georgia, serif; }
        </style>
    </head>
    <body>
        <div>
            <svg>
                <text x="50%" y="50%" dy=".3em">居中文字</text></svg>
        </div>
    </body>

</html>

热心网友时间：2023-10-03 19:52

示例
<?xml version="1.0" encoding="iso-8859-1"?>
<svg width="800" height="600">
<text style="fill:red;font-size:24pt" x="100" y="100"；text-align:center>Hello World!</text>
</svg>