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使用的更多相关文章

  1. SVG animation(text, background)

    SVG animation(text, background) demo https://www.happyelements.com/ LICEcap bug Giphy 低帧率 gif https: ...

  2. 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 ...

  3. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...

  4. svg + d3

    为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...

  5. D3+svg 案例

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 基于SVG的web页面图形绘制API介绍

    转自:http://blog.csdn.net/jia20003/article/details/9185449 一:什么是SVG SVG是1999由W3C发布的2D图形描述语言,纯基于XML格式的标 ...

  7. SVG 2D入门8 - 文档结构

    前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:an ...

  8. 超级强大的SVG SMIL animation动画详解

    本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...

  9. SVG彩虹字

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. idempotence

    如果要追根溯源,幂等性是数学中的一个概念,表达的是N次变换与1次变换的结果相同 http://www.cnblogs.com/weidagang2046/archive/2011/06/04/idem ...

  2. Wiegand协议(转)

    源:http://blog.chinaunix.net/uid-22670933-id-3268318.html Wiegand26协议是由美国工业安全委员会SIA(Security Industry ...

  3. Linux在shell中df半天没反应

    问题描述:  df -hT 一直没反应,只能Ctrl+c中断此操作! 解决方法: 多是mount挂载远程服务,而远程服务已关闭,出于一直mount状态,df  -hT是查看本地挂载和远程挂载! df  ...

  4. 【poj解题】3664

    简单,两次排序 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX 500 ...

  5. [转] spring事务管理几种方式

    前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...

  6. Word字体与像素的对应关系(转)

    源:Word字体与像素的对应关系 英文字体的1磅(pt),相当于1/72 英寸(inch),约等于1/2.8mm.12PT的字打印出来约为4.2mm.网页中12px的字才相当于12像素. 虽然 四号= ...

  7. (简单) POJ 2253 Frogger，Dijkstra。

    Description Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Fro ...

  8. protobuf c++ API

    1.在.proto文件中定义消息格式 2.使用protobuf编译器 3.使用c++ api来读写消息   0.为何使用protobuf?   1.原始内存数据结构,可以以二进制方式sent/save ...

  9. mysql面试

    第一方面:30种mysql优化sql语句查询的方法 避免全表扫描: 1.where 及 order by 上建立索引.2.避免在 where 子句中使用!=或<>操作符3. select ...

  10. js-权威指南学习笔记9

    第九章 类和模块 1.在JS中,类的实现是基于其原型继承机制的,如果两个实例都从同一个原型对象上继承了属性,我们说它们是同一个实例. 2.常见的编程约定:定义构造函数既是定义类,并且类名首字母要大写. ...