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" ...
随机推荐
- 转：如何在 LoadRunner 脚本中做关联 (Correlation)
如何在 LoadRunner 脚本中做关联 (Correlation) 当录制脚本时,VuGen会拦截client端(浏览器)与server端(网站服务器)之间的对话,并且通通记录下来,产生脚本.在V ...
- Delphi 的绘图功能[10] - TFONT 类
Delphi 的绘图功能[10] - TFONT 类 ;DEFAULT_CHARSET = ;SYMBOL_CHARSET = ;SHIFTJIS_CHARSET = ;HAN ...
- highcharts 去掉打印和链接
1)去掉或更改图片右下角的链接 在highcharts.js文件中搜索credits字符串,找到如下的字符串, enabled:设置是否显示链接 text:设置链接显示的名称 href:设置链接的ur ...
- 关于go的不爽
这里想记录下,自己学习.使用go语言,对于go语言不爽的地方. 1. 函数返回类型接在参数类型后面,不容易一眼看清楚函数的返回类型 如下,是不是有种很花的感觉. func NewReader(s st ...
- 仿苹果短信（微信 ，qq）左划弹出菜单
难点: 1.功能的实现,左划.ListView的复用 2.单行显示,多行显示 3.ListView分割线.点击阴影,上下滑动左右滑动无阴影.多点触控改为单点触控 4.融球动画 http://blog. ...
- shell 实例学习
安装crond:yum install crontabs (http://blog.163.com/victory_wxl/blog/static/14130530220115296180333/) ...
- 苹果App Store开发者帐户从申请,验证,到发布应用（2）
app store付费 上面已经介绍了app store id的注册了,下面在注册基础上,介绍一下app store的付费. 在上面注册成功之后,会收到一封邮件. 1.收到邮件Thank Yo ...
- css(二) block，inline和inline-block概念和区别
转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...
- 【java基础】内部类，局部内部类，匿名内部类、静态内部类、接口中的内部类
内部类: 1.定义在一个类中的内部类,内部类的实例化伴随着外围类所定义的方法来构造,内部类对象有外围类的隐式引用,所以内部类可以直接访问外围类的外围类的域,包括私有的,这是内部类的访问特权,所以比常规 ...
- Oracle数据库用户权限和管理员权限
一.如何查看权限 查看用户权限 1. oracle用户查看自己的权限和角色 select * from user_tab_privs; select * from user_role_ ...