SVG的text使用
SVG的text使用：
参考：http://www.docin.com/p-7393979.html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> </head> <body> <div> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <path d="M20,10,20,120M10,30,100,30,M10,70,100,70M10,110,100,110" style="stroke:gray;" /> <text x=20 y=30>Simplest Text</text> <text x=20 y=70 style="stroke:black">Outlined/filled</text> <text x=20 y=110 style="stroke:black;stroke-width:0.5;fill:none">Outlined only</text> </svg> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <g style="font-size:18pt" > <text x=20 y=20 style="font-weight:bold">bold</text> <text x=120 y=20 style="font-style:italic">italic</text> <text x=20 y=60 style="text-decoration:underline">under</text> <text x=80 y=60 style="text-decoration:overline">over</text> <text x=140 y=60 style="text-decoration:line-through">through</text> <!-- word-spacing:10pt导致word之间的距离变大了 --> <text x=20 y=100 style="word-spacing:10pt">abc def</text> <!-- word-spacing:-3pt导致word之间的距离变小了 --> <text x=140 y=100 style="word-spacing:-3pt">abc def</text> <!-- letter-spacing:5pt导致letter之间的距离变大了 --> <text x=20 y=140 style="letter-spacing:5pt">abc def</text> <!-- letter-spacing:-6pt导致letter之间的距离变小了 --> <text x=140 y=140 style="letter-spacing:-6pt">abc def</text> </g> </svg> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <g style="font-size:14pt"> <path d="M100,10,100,100" style="stroke:gray;fill:none" /> <!-- 文本水平对齐的方式三种：start,middle,end --> <text x=100 y=20 style="text-anchor:start">start</text> <text x=100 y=40 style="text-anchor:middle">middle</text> <text x=100 y=60 style="text-anchor:end">end</text> </g> </svg> <svg width="440px" height="240px" xmlns="http://www.w3.org/2000/svg"> <!-- tspan 可以进行text标签内的字体的装饰 --> <text x=10 y=30 style="font-size:12pt" >Swith among <tspan style="font-style:italic">italic</tspan>,normal and <tspan style="font-style:bold">bold</tspan> text. </text> <!-- 在有tspan的情况下，使用line-through会穿过每一个tspan的； --> <text x=10 y=50 style="text-decoration:line-through" >F<tspan dy=4>a</tspan><tspan dy=4>l</tspan><tspan dy=4>l</tspan></text> <!-- 注意后面的文字，会受到前面tspan的位置信息的影响 --> <text x=10 y=90>It's <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8" rotate="5 10 -5 -20 0 15">shaken</tspan>,not stirred.</text> <text x=10 y=130>C<tspan style="baseline-shift:sub">12</tspan> and 10<tspan style="baseline-shift:super">23</tspan></text> </svg> </div> <div> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <!-- 通过旋转将字体变为纵向 --> <text x=10 y=20 transform="rotate(90,10,20)">Rotated 90</text> <!-- 使用writing-mode:tb将字体变为纵向 --> <text x=40 y=20 style="writing-mode:tb;">mode:tb</text> <!-- 可以使用glyph-orientation-vertical:0将字母变为垂直方向;其值只能是90的倍数 --> <text x=70 y=20 style="writing-mode:tb;glyph-orientation-vertical:0">mode:tb</text> <!-- 可以使用letter-spacing:-3pt缩小字母之间的距离 --> <text x=100 y=20 style="writing-mode:tb;glyph-orientation-vertical:0;letter-spacing:-3pt">mode:tb</text> </svg> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <!-- 文本是水平的时候可以使用glyph-orientation-horizontal:90将字母方向旋转，其值只能是90的倍数 --> <text x=10 y=20 style="glyph-orientation-horizontal:90">this is text</text> </svg> </div> </body> </html>
