SVG基础教程(超级详细)

寒水寺一禅

一、内置图形:

rect(矩形)    
circle(圆)  
ellipse(椭圆)   
line(直线)   
polyline(折线)  
polygon(多边形)  
path(路径)
text(文本)
image(图形)
use(复制元素)

二、内置图形的html属性或(css样式):

fill(填充颜色)   
fill-opacity(填充透明度)
stroke(边框颜色)   
stroke-width(边框宽度)   
stroke-opacity(边框透明度)   
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]

三、基本元素用法

1、矩形

基本用法

<rect x="0" y="0" width="100" height="100" fill="#f06"/> 
<!--x表示横坐标,y表示纵坐标,width表示宽,height表示高-->

clipboard.png

扩展用法

<rect x="50" y="20" width="150" height="150"
      style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
 
<rect x="50" y="20" width="150" height="150"
      fill="red" stroke="blue" stroke-width="20" fill-opacity="1" stroke-opacity="0.1"/>

2、圆

基本用法

<circle cx="100" cy="50" r="100" fil='#f06'/>            
<!-- cx表示圆心横坐标,cy表示圆心纵坐标,r表示半径 -->

clipboard.png

扩展用法

<circle cx="100" cy="50" r="40" 
        style="stroke:blue;stroke-width:10;fill:pink"/>
 
<circle cx="100" cy="50" r="40" 
        stroke="black" stroke-width="2" fill="red"/>

3、椭圆

基本用法

<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/>  
<!-- cx表示圆心横坐标,cy表示圆心纵坐标,rx表示横向半径,ry表示纵向半径 -->

clipboard.png

扩展用法

<ellipse cx="300" cy="80" rx="100" ry="50" 
         style="fill:yellow;stroke:purple;stroke-width:2" />
 
<ellipse cx="300" cy="80" rx="100" ry="50" 
         fill="pink" stroke="red" stroke-width="2"/>

4、直线

基本用法

<line x1="0" y1="100" x2="100" y2="0"/>    
<!-- x1起点横坐标,y1表示起点纵坐标,x2表示终点横坐标,y2表示终点纵坐标 -->

clipboard.png

扩展用法

<line x1="0" y1="0" x2="200" y2="200"
      style="stroke:rgb(255,0,0);stroke-width:2"/>
 
<line x1="0" y1="0" x2="200" y2="200" 
      stroke="red" stroke-width="10"/>

5、多边形

基本用法

<polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>         
<!-- 200,10为第一个点   250,190为第二个点  160,210为第三个点 -->

clipboard.png

扩展坐标

<polygon points="200,10 250,190 160,210" 
         style="fill:lime;stroke:purple;stroke-width:1" />

<polygon points="200,10 250,190 160,210"
         fill="red" stroke="blue" stroke-width="1" />

第一个点和最后一个点会连接起来,形成闭合的图形

6、折线

基本用法

<polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>

clipboard.png

扩展用法

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
          style="fill:none;stroke:red;stroke-width:4" /> 
<!--此处将fill设置为none,可以仅仅画曲线,而如果fill有值,则会形成由曲线围城的多边形-->
    
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
          style="fill:blue;stroke:red;stroke-width:4" />

第一个点不会和最后一个点连起来,不会闭合

四、图形元素用法

1、路径

路径是svg中最强大的图形

路径是由一系列命令所组成。

命令            名称                        参数
 M           moveto  移动到                (x y)+
 Z          closepath  关闭路径            (none)
 L           lineto  画线到                (x y)+
 H          horizontal lineto  水平线到      x+
 V          vertical lineto  垂直线到        y+
 A        elliptical arc椭圆弧             (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
 C        curveto 三次贝塞尔曲线到          (x1 y1 x2 y2 x y)+
 S     smooth curveto光滑三次贝塞尔曲线到   (x2 y2 x y)+
 Q        Bézier curveto二次贝塞尔曲线到    (x1 y1 x y)+
 T     smooth Bézier curveto光滑二次贝塞尔曲线到  (x y)+

如果指令字母是大写的,例如M, 则表示坐标位置是绝对位置;如果指令字母小写的,例如m, 则表示坐标位置是相对位置。

基本用法

<path d="M150 0 L75 200 L225 200 Z" />      
<!-- d属性中包含所有路径的点,最后起点和终点连接起来形成闭合图形 -->

扩展用法

<path d="M150 0 L75 200 L225 200 Z" 
      fill="red" stroke="blue" stroke-width="10"/>

图片描述

1.1、贝塞尔曲线(CSQT简称“厕所切图”)

(1)、三次贝塞尔曲线

Cx1 y1, x2 y2, x y

x1,y1 和x2,y2分别为控制点1和2,而x,y为曲线上的关键点
图片描述
下面为曲线上的点随着时间的变化而变化的过程。
clipboard.png

<path d="M20 20 C90 140,130 140,200 25" stroke="#000000" fill="none" style="stroke-width: 2px;"/>

(2)、光滑三次贝塞尔曲线

Sx2 y2, x y

S指令跟在C指令或S指令后面补刀,它会自动在C、S基础上生成一个对称点,所以S指令只需要两个点就可以。
clipboard.png

<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120 S380 150, 450 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 S80 150, 150 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>

(3)、二次贝塞尔曲线

Qx1 y1, x y

(x1,y1)是控制点,(x,y)表示的是曲线的终点。
clipboard.png
下面为曲线上的点随着时间的变化而变化的过程。
clipboard.png

<path d="M20 80 Q90 140, 130 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>

(4)、光滑二次贝塞尔曲线

Tx y

T指令和S指令类似,是给Q、T指令补刀的,T指令只有一个曲线终点,没有控制点(由Q的对称点自动生成);
也可以单独使用,当单独使用时,是一条直线;
clipboard.png

<path d="M20 80 Q90 140, 130 80 T250 140 T350 40 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 T350 140 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>

1.2、圆弧

A rx ry x-deg large-arc sweep-flag x y

rx ry表示x轴半径和y轴半径,x-deg表示x轴旋转角度,large-arc表示大于180度还是小于180度(0为小,1为大),sweep-flag表示弧线方向(0为沿逆时针,1为沿顺时针),x y为最终坐标。

<path d="M80 80 A45 45, 0, 0, 0, 125 125" fill="green" />

2、文本

基本用法

<text x="10" y="15">I love SVG</text>

扩展用法

<text x="0" y="15" 
      fill="red" transform="rotate(30 20,40)">I love SVG</text>

<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
</a>

<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
    i LOVE d3
</text>  
<!-- dx,dy表示平移的距离 -->

<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
    I LOVE <tspan fill="red">D3</tspan>      
</text>
<!-- 使用tspan对文本中的部分特殊定义 -->

沿path方向排列文本textPath

<path id="wavyPath" d="M75,100 a50,25 0 1,0 50,25" fill="none" />
<text x="50" y="50" font-size="14">
    <textPath xlink:href="#wavyPath">
            Text travels along any path that you define for it.
    </textPath>
</text>

3、image图像

<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" x="0" y="0" height="200" width="300"/>

x表示图像左上角在水平方向的位移,
y表示图像做商检在竖直方向的位移,
height,width分别为image的高度和宽度。

注意:默认图像不会缩放,即使定义了height,width,也不会缩放铺满剩余区域,
clipboard.png

如果要控制image的缩放,需要设置preserveAspectRatio值。

preserveAspectRatio="<align> [<meetOrSlice>]"

  • meetOrSlice只有两个值:meet|slice, 默认meet

       meet表示保留长宽比,image或者viewbox在定义的width和height区域都是可见的。
       slice表示保留长宽比,但是整个 定义的width和height区域都由image覆盖,如下(很神奇,被拉直了,原图是折的)

clipboard.png

  • align有一下值:none|xMinYMin|xMidYMin|xMaxYMin|...

       none表示,图片避讳保持长宽比,直接按照100%,在image的width和height指定的区域铺满,

clipboard.png

    除none之外,其他的值都是表示在保持长宽比没有铺满时的放置位置的。如xMidYMin,表示水平上,放在中间,竖直上,放在开头。
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
    x="0"
    y="0"
    height="200"
    width="300" 
    preserveAspectRatio="xMidYMin  meet"/>

clipboard.png

4、use

该<use>元素从SVG文档中获取节点,并在其他位置复制它们。

当use复制其他元素后,还能对复制的元素进行属性的覆盖。
x, y, width, height,href这几个属性,不管源 元素是否有设置,都可以覆盖。
而其他属性,如果源 元素已经设置,则无法覆盖,如果没有设置,则可以再use上设置。

<svg viewBox="0 0 30 10"
     xmlns="http://www.w3.org/2000/svg">
             
    <circle id="myCircle"
        cx="5"
        cy="5"
        r="4"
        stroke="blue" />
     
    <use href="#myCircle"
        x="10"
        fill="blue" />
     
    <use href="#myCircle"
        x="20"
        fill="white"
        stroke="red" />
</svg>

clipboard.png

可以看到设置的x属性覆盖成功了,第二个use的fill也设置成功了,但是第三个use 的stroke没有变成红色,因为circle已经指定了,所以无法覆盖。

五、容器元素用法

1、链接元素

svg的链接元素 a和html的链接元素a很相似,都是指向一个超链接。

在svg的a元素中,可以包含任何的形状

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- A link around a shape -->
  <a href="/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35"/>
  </a>

  <!-- A link around a text -->
  <a href="/docs/Web/SVG/Element/text">
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
  </a>
</svg>

注意: 在获取svg的a元素时,为了区分html的a元素,要加命名空间

//css
@namespace svg url(http://www.w3.org/2000/svg);

svg|a {}

2、defs

defs元素通常用来存储在后续将会用到的图像,其 defs中的图像,不会直接呈现,必须在后续通过其他元素 引用才能呈现。

相当于在js中,封装的一个方法,供其他地方调用。 在这里,是封装了一段html,供后续的html调用。

一般情况下,defs中用来定义过滤,渐变,填充(pattern)等效果。

<svg viewBox="0 0 10 10"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- 定义一个线性渐变,外部的所有元素都可以引用这个效果 -->
        <linearGradient id="myGradient"
            gradientTransform="rotate(90)">
            <stop offset="20%"
                stop-color="gold" />
            <stop offset="90%"
                stop-color="red" />
        </linearGradient>
    </defs>

    <!-- 在defs的外部通过使用url(defs中的id值) 来引用defs中定义的图形 -->
    <circle id="myCircle"
        cx="0"
        cy="0"
        r="5"
        fill="url('#myGradient')" />
</svg>

clipboard.png

3、g

<g>元素是一个用于对其他SVG元素进行分组的容器。

在<g>元素上设置的属性和变换,会统一影响g分组中的所有元素,会把g元素当成一个整体处理。

和前面的defs类似,只是<g>中的元素会直接作为一个整体呈现,可以不需要引用就能呈现,当然也能被use复制。

<svg width="300" height="300"
    xmlns="http://www.w3.org/2000/svg">
    <!-- 将g中的元素作为一个整体,统一设置stroke,transform等 -->
    <g id="myG"
        stroke="green"
        transform="rotate(20 20,40)"
        stroke-width="5">
        <circle cx="40"
            cy="40"
            r="25" />
        <circle cx="60"
            cy="60"
            r="25" />
    </g>

    <!-- 使用use复制g,并且覆盖fill属性 -->
    <use href="#myG"
        x="100"
        fill="blue" />
</svg>

clipboard.png

4、mask

mask元素定义了一个alpha通道(我也不懂,大概懂PS的大神才知道),用于将当前对象合成到背景中,在其他元素上通过mask属性来引用。
其本身不会呈现,必须被其他元素引用才能呈现。

<svg viewBox="-10 -10 120 120">
    <!-- 定义一个mask 遮罩 -->
    <mask id="myMask" x="0" y="0">
        <rect x="0"
            y="0"
            width="100"
            height="100"
            fill="red" />

        <!-- Everything under a black pixel will be invisible -->
        <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
            fill="blue" />
    </mask>

    <polygon points="-10,110 110,110 110,-10"
        fill="orange" />

    <!-- 通过mask属性引用 mask元素 -->
    <circle cx="50"
        cy="50"
        r="50"
        mask="url(#myMask)" />
</svg>

不定义mask时这样

clipboard.png
定义后这样
clipboard.png

不可思议。。。

mask元素有以下属性

  • x 此属性定义遮罩区域左上角的x轴坐标。
  • y 此属性定义遮罩区域左上角的y轴坐标。
  • width 此属性定义遮罩区域的宽度。
  • height 此属性定义遮罩区域的高度。
  • maskContentUnits: userSpaceOnUse|objectBoundingBox, 默认为userSpaceOnUse, 对mask中的内容定义坐标系类型。如上面的react中的x,y等属性
  • maskUnits: userSpaceOnUse|objectBoundingBox, 默认为objectBoundingBox, 对mask本身定义坐标系类型。如mask上的x,y等

userSpaceOnUse此值表示<mask>元素内的所有坐标都是指创建蒙版时定义的用户坐标系。
objectBoundingBox此值指示<mask>元素内的所有坐标都相对于应用蒙版的元素的边界框。

5、pattern

pattern元素定义了一个填充对象,这个对象,可以在其寄宿元素内重复 平铺 覆盖以占满寄宿元素(谁引用pattern,谁就是寄宿元素)。

一般情况下,元素通过自身属性的fill或者 stroke来引用pattern元素。

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
    </pattern>
  </defs>

  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>

clipboard.png

pattern里面不仅可以使用图案,还能放置图片<image>元素。但是不管放置哪个。里面的图形,都会保持图形自身的长宽比平铺,并不会按照pattern定义的width,height,100%占满 pattern。
如果不能100%占满 pattern,那么当 pattern在寄宿元素上,重复平铺时,每个pattern之间看起来就会有间隔。

//宽度变为20%
<pattern id="star"
    width="20%"
    height="10%"
    viewBox="0 0  10 10">
    <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>

clipboard.png

pattern的属性

  • x x坐标起始位置。
  • y y坐标起始位置。
  • width pattern的宽度。
  • height pattern的高度。
  • viewBox 定义pattern元素的的SVG视口的边界。
  • preserveAspectRatio 定义当前元素指定的width,height与里面元素实际展示的尺寸的比例变换关系。

preserveAspectRatio决定的是当前元素定义的width,height属性和里面元素实际展示的关系。 默认里面的元素保持自身的长宽比,即使preserveAspectRatio所在元素的width,height超过了里面元素的实际宽,高。
如果为none,则表示里面的元素在水平、竖直方向上100% 占满pattern定义的width,height。

//设置preserveAspectRatio
<pattern id="star"
    width="20%"
    height="10%"
    viewBox="0 0  10 10"
    preserveAspectRatio="none">
    <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>

clipboard.png

这样pattern中的元素会在 pattern定义的20%,10%的宽高上平铺。

除了svg之外,css中的clip-path也可以通过裁剪的方式做圆、椭圆的剪切。

clip-path: inset(40px 25px 20px 0px);  //距上为40, 距离右边为25,距下面为20,距离左边为0的矩形
clip-path: circle(200px at 0px 0px);  //以0 0 为圆心,200为半径的圆
clip-path: ellipse(100px 50px at 50% 50%); //x轴半径为100, y轴半径为50,圆心为50% 50%的椭圆
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);  //多边形,每一个为一个顶点

6、marker

marker元素定义了用于在给定的<path>、<line>、<polyline>或<polygon>元素上绘制箭头或 多点标记 的图形。
在元素上使用 marker-start, marker-mid, 和 marker-end 属性,来引用marker元素。

marker有如下属性:

  • markerHeight: 定义marker元素的高度
  • markerWidth: 定义marker元素的宽度
  • markerUnits: 该属性为markerWidth、markerHeight以及marker的内容 定义了坐标系统。 userSpaceOnUse|strokeWidth
  • orient:定义marker相对于寄宿元素的方向,值有auto|auto start-reverse|<angle>。
  • refX: marker元素相对于X轴的偏移。和正常坐标系相反,正值向左,负值向右。
  • refY:marker元素相对于Y轴的偏移。和正常坐标系相反,正值向上,负值向下。
  • viewBox: 当前marker片段定义SVG视图端口的边界。
  • preserveAspectRatio:定义了如果marker片段嵌入到具有不同纵横比的容器中,则必须如何对其进行变形。

注意:
如果一个元素定义了marker-start,那么就在开头的位置添加marker,
如果一个元素定义了marker-mid,那么就在所有中间位置添加marker,
如果一个元素定义了marker-end,那么就在结尾位置添加marker。

可以定义多个,那么也就添加多个。

<svg viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- 定义一个箭头标记-->
        <marker id="arrow"
            viewBox="0 0 10 10"
            refX="5"
            refY="5"
            markerWidth="16"
            markerHeight="6"
            markerUnits="strokeWidth"
            preserveAspectRatio="none"
            orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>

        <!-- 定义一个点标记 -->
        <marker id="dot"
            viewBox="0 0 10 10"
            refX="5"
            refY="5"
            markerWidth="5"
            markerHeight="5">
            <circle cx="5"
                cy="5"
                r="5"
                fill="red" />
        </marker>
    </defs>

    <!-- 在开头和结尾位置添加 marker,开头为10,10  结尾为90,90 -->
    <polyline points="10,10 10,90 90,90"
        fill="none"
        stroke="black"
        marker-start="url(#arrow)"
        marker-end="url(#arrow)" />

    <!-- 在开头,结尾和中间 位置添加 marker,开头为15,80  结尾为85,15,其余全为中间 -->
    <polyline points="15,80 29,50 43,60 57,30 71,40 85,15"
        fill="none"
        stroke="grey"
        marker-start="url(#dot)"
        marker-mid="url(#dot)"
        marker-end="url(#dot)" />
</svg>

clipboard.png

7、symbol

定义一个模板元素,本身是不会呈现的,只有使用use引用后,才会呈现出来。

<svg viewBox="0 0 100 100"
    width="300"
    height="300"
    xmlns="http://www.w3.org/2000/svg">
     
    <!-- symbol definition  NEVER draw -->
    <symbol id="sym01"
        viewBox="0 0 150 110">
        <circle cx="50"
            cy="50"
            r="40"
            stroke-width="8"
            stroke="red"
            fill="red" />
        <circle cx="90"
            cy="60"
            r="40"
            stroke-width="8"
            stroke="green"
            fill="white" />
    </symbol>

    <!-- actual drawing by "use" element -->
    <use xlink:href="#sym01"
        x="0"
        y="0"
        width="100"
        height="50" />

</svg>

clipboard.png
只呈现出来了use元素,symbol元素本身没有呈现。

8、svg

svg所定义的片段, 不管在独立的svg文件中,还是嵌入html中,都拥有独立的视口和坐标系统。

<svg xmlns="http://www.w3.org/2000/svg"
    width="150"
    height="100"
    viewBox="0 0 3 2">

    <rect width="1"
        height="2"
        x="0"
        fill="#008d46" />
    <rect width="1"
        height="2"
        x="1"
        fill="#ffffff" />
    <rect width="1"
        height="2"
        x="2"
        fill="#d2232c" />
</svg>

上面的svg为一幅 意大利国旗
clipboard.png

svg元素有如下专有属性:

  • version:指明 SVG 文档遵循规范, 值为1.0 | 1.1
  • x:起始 横坐标
  • y:起始 纵坐标
  • width:svg元素的宽度
  • height:svg元素的高度
  • preserveAspectRatio:是否强制进行统一缩放.
  • viewBox:允许指定一个给定的一组图形伸展以适应特定的容器元素。

六、视口 viewbox

viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height

下面的不设置 viewbox的情形:

<svg x="0" y="0" width="500" height="60"
    xmlns="http://www.w3.org/2000/svg">

    <rect x="0"
        y="0"
        width="100"
        height="150" />

</svg>

clipboard.png

矩形起始于 svg的(0,0)位置,长度为100px,宽度为150px

当设置viewbo后

<svg viewBox="-5 -5 100 150"  width="500" height="600"
            xmlns="http://www.w3.org/2000/svg">

            <rect x="0"
                y="0"
                width="100"
                height="150" />

        </svg>

clipboard.png
可以看到,不仅变大了,而且还向右下角 平移了。
为什么呢?

我们可以看到 viewBox的值为"-5 -5 100 150",(-5 -5)分别表示 最小的x和最小的y,也就是说,左上角原本的(0,0)现在等价于(-5,-5), 那么如果想要时rect 还是在原来的左上角,那么<rect x="-5" y="-5" width="100" height="150" />才可以,而如果设置为
<rect x="0" y="0" width="100" height="150" />就会向右向下平移5px。

然后我们看到viewbox后两个是100 150,分别表示 svg的宽度和高度,即100等同于svg定义的宽度500,150等同于svg定义的高度600,那么在svg容器里面的rect 上设置 width为100,等同于500,高为150,等同于600,这样会有个问题,就是本来rect的长宽比为100:150,而通过viewbox设置后,长宽比会变化, 所以svg默认 即使viewbox宽度比变化了,但是viewbox容器里的元素的长宽比不会变化,会以缩放较小的那个为准。

所以我们可以看到 viewbox相当于 一个比例尺,对原本的svg的位置和宽高 做了相同比例的缩放。

一共有下面的5个元素可以设置 viewbox:
<marker>, <pattern>, <svg>, <symbol>, 和 <view>

与viewbox相关的另一个属性是preserveAspectRatio。
如果说viewbox是控制容器里面元素等比缩放的比例尺的话, preserveAspectRatio就是用来指定 是否需要等比缩放,如果不等比缩放,是否需要整个填充。

preserveAspectRatio:<align> [<meetOrSlice>]
image.png

除了 <image> 元素之外,其他元素使用preserveAspectRatio必须在同一元素上为 viewBox 提供的值。如果没有提供属性 viewBox ,则忽略了preserveAspectRatio。

七、渐变

分为线形渐变和径向渐变,渐变本身不会渲染,必须通过具体元素的fill引用才生效

<svg width="500"
    height="600"
    xmlns="http://www.w3.org/2000/svg">

    <defs>
        <linearGradient id="myGradient"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="0%">
            <!--x1,y1 x2,y2用来定义径向渐变的方向,此处为向右-->
            <stop offset="0%"
                stop-color="blue" />
            <stop offset="100%"
                stop-color="red" />
        </linearGradient>
        
        <radialGradient id="irisGradient">
            <stop offset="25%"
                stop-color="green" />
            <stop offset="100%"
                stop-color="dodgerblue" />
        </radialGradient>
    </defs>
    <rect fill="url(#myGradient)"
        x1="10"
        y1="10"
        width="300"
        height="100" />
</svg>

八、滤镜

<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow>, <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>

比较复杂,用的也比较少,使用时可以查找文档
svg 滤镜

九、动画和交互性

动画被弃用,请使用css animations或者web animations代替

十、事件

最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="120" height="120" viewBox="0 0 120 120"
     version="1.1">
        <polygon points="60,30 90,90 30,90" id="svg_polygon">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/>
        </polygon>
</svg>
<script>
    //svg_hexagon为path的id
    document.getElementById("svg_polygon").addEventListener("click", function() {
        //todo
    });
</script>

十一、svg的css样式

由于在html中,有a元素,所以这就导致了,在css中,使用a时,无法判断是获取的html的a,还是svg的a,所以 最好的方式是使用命名空间,来限定。

<svg width="300"
    height="300"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- A link around a shape -->
    <a href="/docs/Web/SVG/Element/circle">
        <circle cx="50"
            class="my-circle"
            cy="40"
            r="35" />
    </a>

    <!-- A link around a text -->
    <a href="/docs/Web/SVG/Element/text">
        <text x="50"
            y="90"
            text-anchor="middle">
            &lt;circle&gt;
        </text>
    </a>
</svg>
@namespace svg url(http://www.w3.org/2000/svg);   //svg为命名名称,可以自定义


//元素选择器
svg|a:link,
svg|a:visited {
  cursor: pointer;
}

//表示只对svg下的a的 进行操作
svg|a text,
text svg|a {
  fill: blue; /* Even for text, SVG uses fill over color */
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}


//class选择器, 此处circle只有svg中才有这个元素,所以可以不用加命名空间
circle.my-circle {
  stroke: #006600;
  fill: #cc0000;
}

十二、好用的svg库

1、svg.js

svg.js更加接近原生svg语法,可以直观的操作svg。svg.js更快,兼容性好,上手更方便。

2、Snap.svg

Snap.svg更接近jquery的语法,来操作svg。Snap.svg更全,功能丰富。

参考文档: https://developer.mozilla.org...

阅读 13k

小李子的前端
热爱前端的菜鸟,怀揣梦想的小白

若确切地知道现在,就能预见未来

1.9k 声望
28 粉丝
0 条评论
你知道吗?

若确切地知道现在,就能预见未来

1.9k 声望
28 粉丝
宣传栏