SVG简介

SVG

What is SVG?

Scalable Vector Graphics 可缩放矢量图，按照xml格式存储的后缀名为svg的文件。

For example:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
              stroke="orange" fill="transparent" stroke-width="5"/>

    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
             stroke="green" fill="transparent" stroke-width="5"/>

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
复制代码

可以直接当做html元素使用：svg.html

基础图形

rect

矩形

x y 左上角的位置

rx ry 圆角

width height 宽高

circle

圆

cx cy 圆心坐标

r 半径

ellipse

椭圆

cx cy 圆心坐标

rx 横坐标半径

ry 纵坐标半径

line

直线

x1 y1 起点坐标

X2 y2 终点坐标

polyline

折线

points 坐标点集合

polygon

多边形

points 顶点集合 终点和起点自动闭合

path

路径

d 命令集合

Path

各种线的组合

通过一个命令符 + 坐标点来组合绘制图像

移动

#####M m (move)

将画笔移动到指定位置

M x y (or m dx dy)
复制代码

直线

#####L l (line)

从当前点画直线到指定点

L x y (or l dx dy)
复制代码

H h (horizonal) V v (vertical)

水平移动 垂直移动

H x (or h dx)
V y (or v dy)
复制代码

闭合

Z z (Close Path)

自动将首尾用直线连接形成闭合的图形

<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
复制代码

曲线

#####C c (Bezier Curves)

贝塞尔曲线（通过四个点生成曲线）

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
复制代码

S s (smooth)

平滑过渡，衔接两段曲线

S x2 y2, x y (or s dx2 dy2, dx dy)
复制代码

Q q (quadratic curve)

二次曲线，只有一个控制点的贝塞尔曲线

Q x1 y1, x y (or q dx1 dy1, dx dy)
复制代码

T t (cubic Bezier curve)

三次曲线

T x y (or t dx dy)
复制代码

Arcs

弧线（椭圆的一部分）

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
复制代码

绘图

Fill

fill: 颜色名字, rgb 值 (rgb(255,0,0)), 16进制值, rgba值

fill-opacity 透明度

fill="purple"
fill-opacity="0.5"
复制代码

####Stroke

stroke-linecap

前后间隙

butt 不延伸

square 前后延伸一个宽度

round 前后延伸一个圆角宽度

stroke-linejoin

连接处样式

miter 直角转弯

round 圆角转弯

bevel 三角转弯

stroke-dasharray

虚线，以逗号隔开的一串数字

USE CSS

以上的样式都可以通过css来设置

渐变

Linear Gradient

<stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
复制代码

####Radial Gradient

<radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
复制代码

Center and focal point

spreadMethod

平铺 Patterns

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1">
      <stop offset="5%" stop-color="white"/>
      <stop offset="95%" stop-color="blue"/>
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="red"/>
      <stop offset="95%" stop-color="orange"/>
    </linearGradient>

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

  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
</svg>
复制代码

文字

tspan

文字元素可以设置字体样式

x y dx dy 设置绝对位置或者相对位置

rotate 旋转

textLength 文字的总长度

tref

引用定义好的文字

textPath

文字按照指定的路径排列

变形

transform 与css3的一致

剪切与蒙版

clipPath

<svg width="100" height="100" >
  <defs>
    <clipPath id="myClip">
      <rect x="0" y="10" width="100" height="35" />
      <rect x="0" y="55" width="100" height="35" />
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="50" clip-path="url(#myClip)" />
</svg>
复制代码

mask

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <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>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
复制代码

Transparency with opacity

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
</svg> 
复制代码

插入图片

可以将元素直接插入svg元素使用

SVG应用举例

clip-path animation

motion-path

Masking vs. Clipping: When to Use Each

推荐网站

codepen

can i use

转载于:https://juejin.im/post/5b03ac9d6fb9a07a9a112eee