SVG <text>文本

2014-05-04 Svg

##8.文本 <text>

####示例8.1 写一个文本:

欢迎访问wwww.waylau.com
 <svg height="30" width="200">
  <text x="0" y="15" fill="red">欢迎访问wwww.waylau.com </text>
</svg>

####示例8.2 让文本转个角度:

欢迎访问wwww.waylau.com
<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(10 20,40)">欢迎访问wwww.waylau.com</text>
</svg>

####示例8.3 让文本引用path:

欢迎访问www.waylau.com个人博客欢迎访问www.waylau.com
<svg width="500" height="220">
 <defs>
   <path id="myTextPath2"
   d="M75,20 l100,0 l100,30 q0,100 150,100"/>
</defs>

<text x="10" y="100" style="stroke: #000000;">
   <textPath xlink:href="#myTextPath2">
   欢迎访问www.waylau.com个人博客欢迎访问www.waylau.com
  </textPath>
</text>  
</svg>

####示例8.4

可以使用 <tspan> 将文本元素分成几部分,允许每部分有各自的样式

Several lines: 欢迎访问 wwww.waylau.com
<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">欢迎访问</tspan>
    <tspan x="10" y="70">wwww.waylau.com</tspan>
  </text>
</svg>

####示例8.5 使用 <a> 使文本变成一个链接

欢迎访问wwww.waylau.com
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.waylau.com" target="_blank">
    <text x="0" y="15" fill="red">欢迎访问wwww.waylau.com</text>
  </a>
</svg>

####示例8.6 垂直样式

欢迎访问wwww.waylau.com 欢迎访问wwww.waylau.com
<svg height="260" width="200">
<text x="10" y="10" fill="red" style="writing-mode: tb; glyph-orientation-vertical: 0;">
   欢迎访问wwww.waylau.com
</text>
<text x="110" y="10" fill="red"  style="writing-mode: tb; glyph-orientation-vertical: 90;">
   欢迎访问wwww.waylau.com
</text> 
</svg>

SVG <path>路径

2014-05-04 Svg

##7.路径 <path>

下面的命令可用于路径数据:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

####示例7.1 例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

####示例7.2

A B C
<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

由于绘制路径的复杂性,因此强烈建议您使用 SVG 编辑器来创建复杂的图形。推荐用开源矢量图编辑器Inkscape


SVG Shapes之多边形 <polygon>

2014-05-04 Svg

##5.多边形 <polygon>

####示例5.1

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg> **代码解释:**
  • points 属性定义多边形每个角的 x 和 y 坐标

####示例5.2

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

####示例5.3

<svg height="210" width="500">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

####示例5.4 fill-rule属性改为”evenodd”

<svg height="210" width="500">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG Shapes之折线 <polyline>

2014-05-04 Svg

##6.折线 <polyline>

####示例6.1

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

####示例6.2

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:white;stroke:red;stroke-width:4" />
</svg>

SVG Shapes之线条 <line>

2014-05-04 Svg

##4.线条 <line>

####示例4.1

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg> **代码解释:**
  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

SVG Shapes之椭圆 <ellipse>

2014-05-04 Svg

##3.椭圆 <ellipse>

####示例3.1

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg> **代码解释:**
  • cx 属性定义圆点的 x 坐标
  • cy 属性定义圆点的 y 坐标
  • rx 属性定义水平半径
  • ry 属性定义垂直半径

####示例3.2

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg> ####示例3.3
<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

SVG Shapes之圆形 <circle>

2014-05-04 Svg

##2.圆形 <circle>

####示例2.1

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> **代码解释:**
  • cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)
  • r 属性定义圆的半径

SVG Shapes之矩形 <rect>

2014-05-04 Svg

##SVG 形状 SVG 有一些预定义的形状元素,可被开发者使用和操作:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polygon>
  • 多边形 <polyline>
  • 路径 <path>

##1.矩形 <rect> ####示例1.1

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg> **代码解释:**
  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色

####示例1.2

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg> **代码解释:**
  • x 属性定义矩形的左侧位置(例如,x=”0” 定义矩形到浏览器窗口左侧的距离是 0px)
  • y 属性定义矩形的顶端位置(例如,y=”0” 定义矩形到浏览器窗口顶端的距离是 0px)
  • CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)

####示例1.3

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg> **代码解释:**
  • CSS 的 opacity 属性定义整个元素的透明值(合法的范围是:0 - 1) 参考:

####示例1.4

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg> **代码解释:**
  • rx 和 ry 属性可使矩形产生圆角。

####示例1.5

<svg width="400" height="180">
   <rect x="50" y="70" width="35" height="20"
	style="fill: yellow; fill-opacity: 0.5;
  	stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/>
</svg> **代码解释:**
  • stroke-dasharray定义断续线,实线和虚线分别以5和2的长度交替显示。