svg中文字显示及常用样式设置

前言

svg标签主要用于绘制图表,难免需要显示一些文字。svg中自有的文本标签text

text

svg中文字标签 w3标准

x,y绝对坐标

dx、dy相对坐标,dx="0 15 30 45"

rotate, [0, 360] rotate="0 15 30 45"

textLength文字长度(不常用)

lengthAdjust文字间距(不常用)

<text x="40" y="50">文字显示</text>

竖向排列1

<text x="200" y="0" style="font-size:24px; writing-mode: tb;">垂直文字</text>

竖向排列2,(备注dx,dy取决于font-size: 14px;),

<text class="title" x="20" y="27.5" dx="-14 -14 -14 -14 -14 -14" dy="0 15 15 15 15 15">
    响应率︵%︶
</text>
text{
    font-size: 14px;
    fill: rgb(232, 239, 244);
    text-anchor: middle;
  }

超出部分显示..., css无法实现, 需要借助js

特殊样式

默认<text>从起始位置(x,y)开始展示
fill的默认为black,stroke默认为none
text-anchor="middle"
start|middle|end(起始坐标|中轴坐标|结束坐标)

tspan

分离text, 给text添加绝对和相对坐标、样式。(不推荐使用绝对坐标, 此时可以把text看做一个text分组)

文本分割

<text x="240" y="120"> 
    <tspan>SVG</tspan>
    <tspan>SVG</tspan>
</text>

两行显示

<text x="240" y="120"> 
    <tspan>SVG1</tspan>
    <tspan dy="24">SVG2</tspan>
</text>

textPath

文字排列沿线

<defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <use xlink:href="#MyPath" fill="none" stroke="red"  />
 <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

tref

文本复用,svg2.0中已经被删除。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用XML描述的矢量文件W3C标准(1.1):http://www.w3.org/TR/SVG11/浏览器支持情况...
    没汁帅阅读 6,068评论 0 16
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,112评论 22 225
  • 接着上篇文章继续往后讲解其他知识点,感谢读者们愿意花费您们宝贵时间阅读! 使用滤镜filter(也是设置阴影) <...
    lilyping阅读 868评论 0 0
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,344评论 2 66
  • 亲爱的天使28班所有的小伙伴们大家早上好!相信大部分小伙伴都认识我或者听过我的分享.我就是小荣班主任! 我的三个标...
    小荣姐阅读 185评论 0 0