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

怎么在svg里设置文字的center位置,第1张

给你做了一个小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>

SVG布局位置不够。

1、首先选中SVG布局(外层),秀米svg不够长是因为SVG布局位置不够。

2、其次动画、取消宽高比。

3、最后高度调整大点(eg:1000)即可。

在秀米svg布局中,点击动画选项按钮,取消勾选自动宽高比将宽高比设置为100:67,输入文字内容,横向和纵向是文字内容,在方框内显示的位置,可以根据自己的需求进行调整,文字的大小也可根据文字的长度以及在方框内预览出的效果进行适当的调整。在d幕中文字的颜色可以稍微花哨一点。接下来在动画列表中选择字幕动画方向,可以进行修改动画时长。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11342812.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存