SVG 基础形状

2017-06-30 本文已影响0人 _chuuuing_

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

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

矩形 <rect>

x：矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y：矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
rx 和 ry：使矩形产生圆角。
width 和 height ：定义矩形的高度和宽度
style：CSS 属性
CSS 的 fill：矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width：矩形边框的宽度
CSS 的 stroke：矩形边框的颜色
CSS 的 fill-opacity：填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity：笔触颜色的透明度（合法的范围是：0 - 1）
CSS opacity：元素的透明值 (范围: 0 到 1)。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="200" height="130"
  style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

圆形 <circle>

cx和cy：圆点的x和y坐标
=> 如果省略cx和cy，圆的中心会被设置为(0, 0)
r：圆的半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

椭圆 <ellipse>

CX：椭圆中心的x坐标
CY：椭圆中心的y坐标
RX：水平半径
RY：垂直半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

直线 <line>

x1：在 x 轴定义线条的开始
y1：在 y 轴定义线条的开始
x2：在 x 轴定义线条的结束
y2：在 y 轴定义线条的结束

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

多边形 <polygon>

<polygon> 标签用来创建含有不少于三个边的图形。是由直线组成，其形状是"封闭"的（所有的线条连接起来）。
points：多边形每个角的 x 和 y 坐标
fill-rule：填充方式，有nonzero和evenodd两种选项

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

曲线 <polyline>

用于创建任何只有直线的形状：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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>

路径 <path>

用于定义一个路径。
下面的命令可用于路径数据：

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

注意：以上所有命令均大小写敏感。大写表示绝对定位，小写表示相对定位。

d属性定义了路径描述。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

说明：它开始于位置(150,0)，到达位置(75,200)，然后从那里开始到(225,200)，最后在(150,0)关闭路径。

Quadratic Bezier 曲线：

<path id="purple" d="M 100 400 q 200 -300 400 0" fill="none" 
stroke="purple" stroke-width="3" />

说明： q x1 y1 x y：小写的q，相对位置，从当前位置画曲线至相对坐标（x, y），控制点为相对坐标（x1, y1）

文本 <text>

x，y：文本位置
fill：文本颜色
transform：文字旋转 transform="rotate(30 20,40)": rotate(a x,y) 基于点（x，y）进行角度a的旋转

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

注意：该<text>可被包含在<a></a>标签以内

线性渐变 <linearGradient>

放射性渐变 <radialGradient>

重要属性 stroke

stroke：颜色
stroke-width：宽度
stroke-linecap：线条端点形状butt / 无端点， round / 圆形，square / 正方形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="10">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>```
![](https://img.haomeiwen.com/i2662224/a2cae78a0d8d18db.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- stroke-dasharray：用于创建虚线