主页

索引

模块索引

搜索页面

元素点 [1]

矩形 <rect>

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" version="1.1" style="margin:50px"><rect width="200" height="200" x="95" y="95" rx="20" ry="20" style="fill:#636363;stroke-width:2;stroke:#212121;fill-opacity:.1;stroke-opacity:.9;opacity:.9"/></svg>
../../../_images/item_rect.svg

解析:

x                 矩形左上角的x位置
y                 矩形左上角的y位置
rx                圆角的x方位的半径
ry                圆角的y方位的半径
width             矩形的宽度
height            矩形的高度
fill              设置对象内部的填充颜色
fill-opacity      控制填充色的不透明度（范围：0 - 1）
stroke            定义矩形边框的颜色
stroke-opacity    控制描边的不透明度（范围：0 - 1）
stroke-width      定义矩形边框的宽度

圆形 <circle>

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

解析:

r       圆的半径
cx      圆点的x坐标
cy      圆点的y坐标

椭圆 <ellipse>

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" version="1.1" style="margin:50px"><ellipse cx="275" cy="125" rx="100" ry="50" style="fill:#7d9ec0;stroke:#6b6b6b;stroke-width:2"/></svg>
../../../_images/item_ellipse.svg

解析:

cx      椭圆中心的x坐标
cy      椭圆中心的y坐标
rx      定义的水平半径
ry      定义的垂直半径

线条 <line>

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" version="1.1"><line x1="0" x2="100" y1="0" y2="100" style="stroke:#636363;stroke-width:2"/><line x1="100" x2="0" y1="100" y2="200" style="stroke:#636363;stroke-width:2"/></svg>
../../../_images/item_line.svg

解析:

x1    起点的x位置
y1    起点的y位置
x2    终点的x位置
y2    终点的y位置

折线 <polyline>

<svg xmlns="http://www.w3.org/2000/svg" style="height:500px;width:1000px" version="1.1"><polygon points="100 10 40 180 190 60 10 60 160 180" style="fill:none;stroke:#000;stroke-width:3"/><polyline points="250 10 190 180 340 60 160 60 310 180" style="fill:#ee2c2c;stroke:#ee2c2c;stroke-width:3"/></svg>
../../../_images/item_polyline.svg

解析:

points:
每个点必须包含2个数字，一个是x坐标，一个是y坐标。
所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”

多边形 <polygon>

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1"><polygon points="220 100 300 210 170 250 123 234" style="fill:#ccc;stroke:#000;stroke-width:1"/></svg>
../../../_images/item_polygon.svg

解析:

points
每个点必须包含2个数字，一个是x坐标，一个是y坐标。
所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”
路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)

备注

和折线很像，它们都是由连接一组点集的直线构成。不同的是，<polygon> 的路径在最后一个点处自动回到第一个点

路径 <path>

备注

path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列

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(从当前点画一条直线到路径的起点)

直线命令

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1"><path d="M10 10 H 90 V 90 H 10 L 10 10"/><circle cx="10" cy="10" r="2" fill="red"/><circle cx="90" cy="90" r="2" fill="red"/><circle cx="90" cy="10" r="2" fill="red"/><circle cx="10" cy="90" r="2" fill="red"/></svg>
../../../_images/item_path11.svg
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1"><path fill="transparent" stroke="#000" d="M10 10 H 90 V 90 H 10 Z"/><circle cx="10" cy="10" r="2" fill="red"/><circle cx="90" cy="90" r="2" fill="red"/><circle cx="90" cy="10" r="2" fill="red"/><circle cx="10" cy="90" r="2" fill="red"/></svg>
../../../_images/item_path12.svg
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1"><path fill="transparent" stroke="#000" d="M10 10 h 80 v 80 h -80 Z"/><circle cx="10" cy="10" r="2" fill="red"/><circle cx="90" cy="90" r="2" fill="red"/><circle cx="90" cy="10" r="2" fill="red"/><circle cx="10" cy="90" r="2" fill="red"/></svg>
../../../_images/item_path13.svg

曲线命令

三次贝塞尔曲线

<svg xmlns="http://www.w3.org/2000/svg" width="190" height="160" version="1.1"><path fill="transparent" stroke="#000" d="M130 110 C 120 140, 180 140, 170 110"/><circle cx="130" cy="110" r="2" fill="red"/><circle cx="120" cy="140" r="2" fill="red"/><line x1="130" x2="120" y1="110" y2="140" style="stroke:red;stroke-width:2"/><circle cx="180" cy="140" r="2" fill="red"/><circle cx="170" cy="110" r="2" fill="red"/><line x1="180" x2="170" y1="140" y2="110" style="stroke:red;stroke-width:2"/></svg>
../../../_images/item_path21.svg
<svg xmlns="http://www.w3.org/2000/svg" width="190" height="160" version="1.1"><path fill="transparent" stroke="#000" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"/><circle cx="10" cy="80" r="2" fill="red"/><circle cx="40" cy="10" r="2" fill="red"/><line x1="10" x2="40" y1="80" y2="10" style="stroke:red;stroke-width:1"/><circle cx="65" cy="10" r="2" fill="red"/><circle cx="95" cy="80" r="2" fill="red"/><line x1="65" x2="95" y1="10" y2="80" style="stroke:red;stroke-width:1"/><circle cx="125" cy="150" r="2" fill="#00f"/><circle cx="180" cy="80" r="2" fill="red"/><circle cx="150" cy="150" r="2" fill="red"/><line x1="95" x2="125" y1="80" y2="150" style="stroke:#00f;stroke-width:1"/><line x1="180" x2="150" y1="80" y2="150" style="stroke:red;stroke-width:1"/></svg>
../../../_images/item_path22.svg
<svg xmlns="http://www.w3.org/2000/svg" width="190" height="160" version="1.1"><path fill="transparent" stroke="#000" d="M10 10 C 20 20, 40 20, 50 10"/><path fill="transparent" stroke="#000" d="M70 10 C 70 20, 120 20, 120 10"/><path fill="transparent" stroke="#000" d="M130 10 C 120 20, 180 20, 170 10"/><path fill="transparent" stroke="#000" d="M10 60 C 20 80, 40 80, 50 60"/><path fill="transparent" stroke="#000" d="M70 60 C 70 80, 110 80, 110 60"/><path fill="transparent" stroke="#000" d="M130 60 C 120 80, 180 80, 170 60"/><path fill="transparent" stroke="#000" d="M10 110 C 20 140, 40 140, 50 110"/><path fill="transparent" stroke="#000" d="M70 110 C 70 140, 110 140, 110 110"/><path fill="transparent" stroke="#000" d="M130 110 C 120 140, 180 140, 170 110"/></svg>
../../../_images/item_path23.svg

二次贝塞尔曲线

<svg xmlns="http://www.w3.org/2000/svg" width="190" height="160" version="1.1"><path fill="transparent" stroke="#000" d="M10 80 Q 95 10 180 80"/><circle cx="10" cy="80" r="2" fill="red"/><circle cx="95" cy="10" r="2" fill="red"/><circle cx="180" cy="80" r="2" fill="red"/><line x1="10" x2="95" y1="80" y2="10" style="stroke:red;stroke-width:1"/><line x1="95" x2="180" y1="10" y2="80" style="stroke:red;stroke-width:1"/></svg>
../../../_images/item_path31.svg
<svg xmlns="http://www.w3.org/2000/svg" width="190" height="160" version="1.1"><path fill="transparent" stroke="#000" d="M10 80 Q 52.5 10, 95 80 T 180 80"/><circle cx="10" cy="80" r="2" fill="red"/><circle cx="52.5" cy="10" r="2" fill="red"/><line x1="10" x2="52.5" y1="80" y2="10" style="stroke:red;stroke-width:1"/><circle cx="95" cy="80" r="2" fill="red"/><line x1="95" x2="52.5" y1="80" y2="10" style="stroke:red;stroke-width:1"/><circle cx="180" cy="80" r="2" fill="#00f"/><circle cx="137.5" cy="150" r="2" fill="#00f"/><line x1="95" x2="137.5" y1="80" y2="150" style="stroke:#00f;stroke-width:1"/><line x1="137.5" x2="180" y1="150" y2="80" style="stroke:#00f;stroke-width:1"/></svg>
../../../_images/item_path32.svg

弧形

A命令的参数:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
或者
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

rx ry: 弧形命令A的前两个参数分别是x轴半径和y轴半径
x-axis-rotation: 弧形命令A的第三个参数表示弧形的旋转情况
large-arc-flag（角度大小） 和sweep-flag（弧线方向）
  large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧
  sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320" version="1.1"><path fill="green" fill-opacity=".5" stroke="#000" stroke-width="2" d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"/></svg>
../../../_images/item_path41.svg
<svg xmlns="http://www.w3.org/2000/svg" width="325" height="325" version="1.1"><path fill="green" d="M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z"/><path fill="red" d="M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z"/><path fill="purple" d="M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z"/><path fill="#00f" d="M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z"/></svg>
../../../_images/item_path42.svg

文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><text x="0" y="15" fill="red">I love SVG</text></svg>
../../../_images/item_text1.svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text></svg>
../../../_images/item_text2.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><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>
../../../_images/item_text3.svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><text x="10" y="20" style="fill:red">Several lines: <tspan x="10" y="45">First line</tspan> <tspan x="10" y="70">Second line</tspan></text></svg>
../../../_images/item_text4.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><a target="_blank" xlink:href="http://www.w3schools.com/svg/"><text x="0" y="15" fill="red">I love SVG</text></a></svg>
../../../_images/item_text5.svg

标记元素marker

可依附于<path> <line> <polyline> <polygon>元素上，写在<des></des>标签内部，常见的用法是为线段添加箭头。当然也可以为图形元素添加其他内容(如终点处添加圆形、矩形等)

<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="2000"><path fill="#000" d="M20,20 L100,60 L20,100 L40,60 L20,20"/><circle cx="20" cy="20" r="2" fill="red"/><circle cx="100" cy="60" r="2" fill="red"/><circle cx="20" cy="100" r="2" fill="red"/><circle cx="40" cy="60" r="2" fill="red"/></svg>
../../../_images/item_marker1.svg

参数说明:

viewBox：坐标系区域
refX refY：viewBox内的基准点，绘制时该点在线上
makerUnits：标记大小的基准，取值有两个[ strokeWidth| userSpaceOnUse ]
  可以是以线的宽度为基准，也可选择以线前端的大小为基准。
  标记大小根据基准等比放大或者缩小
markerWidth markerHeight：标记的大小
orient：绘制方向，auto或者角度值
id：标记ID

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><marker id="markerDemo1" markerHeight="12" markerUnits="strokeWidth" markerWidth="12" orient="auto" refX="6" refY="6" viewBox="0 0 12 12"><path fill="#000" d="M2,2 L10,6 L2,10 L4,6 L2,2"/></marker></defs><line x1="10" x2="160" y1="10" y2="160" stroke="#00f" stroke-width="2" marker-end="url(#markerDemo1)" marker-mid="url(#markerDemo1)" marker-start="url(#markerDemo1)"/></svg>
../../../_images/item_marker2.svg
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><marker id="markerDemo2" markerHeight="12" markerUnits="strokeWidth" markerWidth="12" orient="auto" refX="6" refY="6" viewBox="0 0 12 12"><path fill="#000" d="M2,2 L10,6 L2,10 L4,6 L2,2"/></marker></defs><path fill="transparent" stroke="#00f" stroke-width="2" marker-end="url(#markerDemo2)" marker-mid="url(#markerDemo2)" marker-start="url(#markerDemo2)" d="M20,70 T80,100 T160,80 T300,120 T200,90"/></svg>
../../../_images/item_marker3.svg

主页

索引

模块索引

搜索页面