SVG快速入门小白篇

<?xml version='10.' standalone='no'>
standalone 规定此SVG文件是否是独立的 或者是说含有外部文件的引用
在html中引入svg
<embed src="s.svg" type="image/svg+xml" />
<object data="s.svg" type="image/svg+xml"></object>
<img src="s.svg" alt="">

viewBox 表示 250*250 会放到500*500上显示 相当于放大两倍
<svg version="1.1" height="500" width="500" viewBox="0 0 250 250"></svg>

x y 起点位置

rx ry x轴y轴的圆角

<rect x='0' y='0' rx='100' ry='80' width="300" height="200" style="fill:red; stroke-width:0; stroke:yellow;stroke-opacity: 0.5;fill-opacity: .5"/>

cx cy 设置圆心位置如果省略会被设置为 (0, 0) r 圆的半径

<circle cx="100" cy="100" r="100" style="fill: pink; stroke: red;" /> 

cx cy 设置椭圆圆心 
rx 设置椭圆的水平半径 ry 设置椭圆的垂直半径

<ellipse cx="200" cy="100" rx="100" ry="50" fill="red"/>

x1 y1 开始的位置坐标 
x2 y2 结束的位置坐标 

<line x1="0" y1="0" x2="100" y2="100" style="stroke: red; stroke-width: 10"/> 

points 每个点的坐标 

<polygon points="100,0 0,100 200,100" style="fill: #fff; stroke: red;" /> 
<polygon points="100,0 150,50 200,50 175,100 200,200 100,150 0,200 25,100 0,50 50,50" style="fill: #fff; stroke: red;" /> 

points 每个转折点的坐标

<polyline points="1,1 1,50 50,50 50,100 100,100" style="fill:white;stroke:red;stroke-width:2"/>

<path d='M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274' style="stroke: red" />

M 起点
H 绘制水平线 两个值 起点和终点 一个值 以前面那个点为起点 当前值为终点
V 绘制垂直线 两个值 起点和终点 一个值 以前面那个点为起点 当前值为终点
Z 会从最后那个点连接到起始点

<path d='M20 20 H10 100 V10 100 Z' style="stroke: red; fill: transparent;" />

Q 二次贝塞尔曲线 一个控制点 一个终点坐标 先写控制点然后在写终点坐标

<path d='M10 10 Q50 80, 100 10' style="stroke: red; fill: transparent;" />

C 三次贝塞尔曲线 两个控制点 一个终点坐标 先是两个控制点然后在是终点坐标

<path d='M10 10 C10 80, 100 80, 100 10' style="stroke: red; fill: transparent;" />

S 可以用来创建于之前那些曲线一样的贝塞尔曲线 它是跟在C三次贝塞尔曲线后面的
如果S跟在C后面 那么他的第一个控制点就会假设成前一个控制点的对称点

<path d="M10 80 C30 0, 80 0,100 80 S170 160, 190 80" stroke="black" fill="transparent"/>

T 是跟在Q二次贝塞尔曲线后面的 它只需要设置一个终点坐标就可以了 控制点会假设成前面控制点的对称点

<path d='M10 100 Q50 170, 100 100 T 190 100' style="stroke: red; fill: transparent;" />
<ellipse cx='60' cy='108' rx='40' ry='60' fill='red'/>

A 弧形 已知两点和半径画椭圆 有7个参数
前两个 椭圆的水平半径和垂直半径 
第三个 旋转角度 
第四个 选择的弧度是否大于180 也就是显示大部分还是小部分 value==> 0 or 1 
第五个 旋转的方向 1顺时针 0逆时针 
后面两个 终点坐标

<path d="M10 10 L50 50 A40 60 0 0 1 100 100 L200 200" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> 
<path d="M50 50 A50 50 0 1 1 100 100 L100 50 Z" fill="transparent" stroke='red' stroke-linecap='butt' stroke-width='20'/> 

1、stroke\-linecap 线段两端的属性

  butt 两边全部去除

  square 超出实际大小 stroke\-width的长度
  
  round 两端圆角

2、stroke\-linejoin 两条线段之间的连接方式
  
  miter 直角连接

  round 圆角连接
    
  bevel 平角连接

3、stroke\-dasharray 虚线

'x,y' 虚线的方框的宽度 和虚线两点之间的距离

<style type="text/css">
<![CDATA[
  #tt:hover{
  stroke: red
  }
]]>
</style> 

必须得设置一个id用于之后调用
x1 y1 x2 y2 用于规定渐变的方向 两点直线指向的方向 就是渐变的方向
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
  <stop offset="0%" stop-color="red"/>
  <stop offset="50%" stop-color="black" stop-opacity="0"/>
  <stop offset="100%" stop-color="blue"/>
</linearGradient>

cx cy 中心点 r半径
fx fy 焦点

  spreadMethod 当渐变到达终点时之后的操作
  pad 到终点之后剩余的被最后的颜色填充
  reflect 反向继续渐变
  repeat 重头开始继续渐变
  gradientUnits 大小 中心点，焦点等长度的设置
  objectBoundingBox 相对位置0~1 相对于外层宽高进行缩放 默认
  userSpaceeOnUse 绝对位置 就是要设置具体的坐标

<radialGradient id='rg1' cx='0.5' cy='0.5' r='0.4' fx='0.75' fy='0.75' spreadMethod='reflect'>
  <stop offset='0%' stop-color='red'/>
  <stop offset='100%' stop-color='blue'/>
</radialGradient>

会将里面的图形按照比例平铺到调用的框里
patternUnits和gradientUnits是一样的用法

  <pattern id="Pattern" x="0" y="0" width=".3" height=".3" >
  <rect x="0" y="0" width="50" height="50" fill="pink"/>
  <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
  <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity=".5"/>

文本 x y 坐标
text-anchor 表示上面的坐标是在文本的何处
start end middle
font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill='none' /> 
<text x='100' y='100' text-anchor='inherit'> 

SVG 
 子部分/文本
x y 重新定位
dx 偏移量
rotate 旋转 

 <tspan dx='10' rotate='45'>child</tspan> 

取得一个路径 字符就回顺着路径环绕走
 <textPath xlink:href="#my_path">This text follows a curve.</textPath> 
 </text> 

g 可以将属性设置给下面的所有元素

<g fill='red'>
  <rect x="0" y="0" width="10" height="10" />
  <rect x="20" y="0" width="10" height="10" />
</g> 

属性 transform 可以写2d动画 translate rotate skew scale

<defs>
    <!-- 剪切 -->
    <clipPath id='cut_off'>
        <rect x='0' y='0' width='100' height='100'/>
    </clipPath>

    <linearGradient id="Gradient">
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <!-- 遮罩 -->
    <mask id="Mask">
        <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
    </mask>
</defs>

 <image xlink:href='https://developer.mozilla.org/media/img/mdn-logo.png'/>