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>
SVG的text使用的更多相关文章
- SVG animation(text, background)
SVG animation(text, background) demo https://www.happyelements.com/ LICEcap bug Giphy 低帧率 gif https: ...
- how to get svg text tspan x,y position value in js
how to get svg text tspan x,y position value in js <svg xmlns="http://www.w3.org/2000/svg&qu ...
- HTML中的SVG
HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...
- svg + d3
为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...
- D3+svg 案例
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 基于SVG的web页面图形绘制API介绍
转自:http://blog.csdn.net/jia20003/article/details/9185449 一:什么是SVG SVG是1999由W3C发布的2D图形描述语言,纯基于XML格式的标 ...
- SVG 2D入门8 - 文档结构
前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:an ...
- 超级强大的SVG SMIL animation动画详解
本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...
- SVG彩虹字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- PAT (Advanced Level) 1091. Acute Stroke (30)
BFS求连通块.递归会爆栈. #include<cstdio> #include<cstring> #include<cmath> #include<algo ...
- how to enable #ifdef macro in the command line of make?
Compilers normally use the -D flags eg Code: test.o: test.cpp $(CC) $(CFLAGS) -DTEST1 test.cpp -o $@
- Yaf 使用遇到的坑
yaf 使用心得: 1. yaf中使用__get魔术方法后,直接导致模板不能自动渲染,需要手动指定模板 ? 1 $this->getView()->display('index/in ...
- jQuery扩展两类函数（对象调用，静态调用）
作者:zccst 先看小例子: $(function(){ //扩展方式1-通过对新调用 $.fn.each1=function(){ console.log("hehehehe$.fn.f ...
- （一）Javascript基础知识
一,五种基本数据类型和一种复合数据类型. 五种基本数据类型 1,undefined 2,null 3,string 4,number 5,boolean 6,复合数据类型(Object,Array,D ...
- [MySQL]mysql指定路径启动
/usr/sbin/mysqld --defaults-file=/etc/mysql/my.cnf --basedir=/usr --datadir=/var/lib/mysql --pid-fil ...
- Linux开发IDE打造
一直以来都是在windows下做开发的,微软提供的IDE vs开发起来确实快捷高效,接触linux也很久了通常都是使用vim进行一些基础文件的编译,现在突然要转到linux做开发还是不太适应的,网上 ...
- WCF应用场景
WCF全称Windows Communication Foundation,是Microsoft为构建面向服务的应用提供的分布式通信编程框架,是.NET Framework 3.5的重要组成部分.使用 ...
- BootStrap TreeView使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Markdown及MarkdownPad使用规则
Markdown Markdown 是一种轻量级标记语言.它允许人们"使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档". Markdown语法简要 ...