SVG的text使用
2024-10-09 10:07:36
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>
最新文章
- DATEADD和DATEDIFF函数、其他日期处理方法 、已打开的端口、FORMAT函数
- 图算法（一）——基本图算法（BFS，DFS及其应用）（1）
- 关于C++中字符的转换
- [译]ASP.NET Core 2.0 全局配置项
- AngularJS学习篇（二十）
- JAVA基础-集合（二）
- [bzoj4824][Cqoi2017]老C的键盘
- SpringCloud搭建Eureka集群
- Linux查看当前目录下文件名中包含指定字符的文件
- restore not found的错误(问题2)
- c#线程池中的异常
- QTREE6&&7 - Query on a tree VI &&VII
- c++ 异常处理（2）
- 读懂SAP Leonardo物联网平台
- 静态库lib调试
- day18-19 Storm
- iOS转让app-您必须移除要转让的 App 的所有构建版本和测试员，并清除“测试信息”下的所有信息字段解决方案
- ElasticSearch client API
- 记录一次shell里局部变量的问题
- [c# 20问] 4.Console应用获取执行路径