svg标签:标签和标签的应用(代码)
导读:收集整理的这篇文章主要介绍了svg标签:<text >标签和<tspan>标签的应用(代码),觉得挺不错的,现在分享给大家,也给大家做个参考。这篇文章给大家分享的内容是关于svg标签:<text >标签和...
收集整理的这篇文章主要介绍了svg标签:text >
标签和tspan>
标签的应用(代码),觉得挺不错的,现在分享给大家,也给大家做个参考。这篇文章给大家分享的内容是关于svg标签:text >
标签和tspan>
标签的应用(代码),有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助。text 属性
x: 文本绘制x轴位置
y: 文本绘制y轴位置
dx: 每个字符相对前一个字符的偏移距离
dy: 每个字符相对前一个字符的偏移距离
svg width="100%" height="100%" version="1.1" XMlns="http://www.w3.org/2000/svg"> text x="100" y="100" dy="100" fill="black" style="font-Size:40px; "> tspan fill="blue" dy="-20 10"> 我是/tspan> tspan fill="red"> 中国人/tspan> /text> path d="m100,0 V200 M0,100 H200" stroke="red"/> /svg>
文本水平垂直居中
水平排列
text-anchor属性可设置文本水平排列,有三个取值 start | middle | end
svg width="100%" height="100%" version="1.1" xMLns="http://www.w3.org/2000/svg"> text x="200" y="50" text-anchor="start" fill="black" style="font-size:40px; "> 我是中国人/text> text x="200" y="100" text-anchor="middle" fill="black" style="font-size:40px; "> 我是中国人/text> text x="200" y="150" text-anchor="end" fill="black" style="font-size:40px; "> 我是中国人/text> path d="M200,0 V200 M0,100 H400" stroke="red"/> /svg>
textpath> 标签
textpath> 可以让文本在指定路径上排列 。
svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none"/> text style="font-size:20px; "> textPath xlink:href="#p1"> 我是根据固定曲线来绘制的文字方向/textPath> /text> /svg>
超出Path的部分,浏览器不进行渲染。
文本在路径上的偏移可以用定位属性 x, y, dx, dy,text-anchor 和 startOffset 属性 。
- @H_126_43@
y属性设置是没有任何效果的。
dy可设置字符在法线上的偏移。
text-anchor是设置文本水平排列效果。
x/dx/startOffset可以设置字符在路径上的渲染起点。
相关文章推荐:
svg如何实现坐标系统变换(附代码)
svg中marker> 元素的使用及marker属性的介绍
以上就是svg标签:text > 标签和tspan> 标签的应用(代码)的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: svg标签:
本文地址: https://pptw.com/jishu/584339.html