svg基础知识

长方形：-rect

• rx 和 ry 属性可使矩形产生圆角。

• x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px）

• y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px）

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度

• style 属性用来定义 CSS 属性

• CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）

• CSS 的 stroke-width 属性定义矩形边框的宽度

• CSS 的 stroke 属性定义矩形边框的颜色

• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）

• CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

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

圆形 ：-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="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>

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

• points 属性定义多边形每个角的 x 和 y 坐标
  points 属性定义折线每个点的坐标（x，y），用空格分隔每个点。points的定义形式有两种：
  points=”x1,y1 x2,y2 ……”
  points=”x1 y1 x2 y2 ……”
  
  • fill-rule:nonzero | evenodd | inherit

nonzero

字面意思是”非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图演示了nonzero规则:

evenodd

字面意思是”奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。下图演示了evenodd 规则:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</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

d的属性：
M = moveto //画笔起始位置
L = lineto //画直线（x，y）坐标
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//自动闭合

transform="translate(x,y)": 加了描边后需要平移（x=stroke-width/2,
y=stroke-width/2）

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

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

文本 - text

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

stroke

stroke-dasharray (10, 10, 5, 5) 绘制虚线: 一个参数时： 表示一段虚线长度和每段虚线之间的间距
两个参数或者多个参数时：一个表示长度，一个表示间距
stroke-linecap: butt | round 圆角| square方角
stroke-dashoffset： 定义一条线，文本或元素距离（相当于基于position：relative；设置left值。只是不像left单纯的基于x方向设置， stroke-dashoffset是基于svg路径设置的）
stroke-linejoin = miter默认直角 | round圆弧 | bevel 折线 描述转角