SVG基礎教程(超級詳細)

時間  2019-11-09
標籤 svg 基礎 教程 超級 詳細 简体版
原文   原文鏈接

1、內置圖形:

rect(矩形)    
circle(圓)  
ellipse(橢圓)   
line(直線)   
polyline(折線)  
polygon(多邊形)  
path(路徑)
text(文本)
image(圖形)
use(複製元素)

2、內置圖形的html屬性或(css樣式):

fill(填充顏色)   
fill-opacity(填充透明度)
stroke(邊框顏色)   
stroke-width(邊框寬度)   
stroke-opacity(邊框透明度)   
stroke-dasharray(建立虛線)
transform(變換)
filter(濾鏡)(url[#濾鏡id)]

3、基本元素用法

一、矩形

基本用法css

<rect x="0" y="0" width="100" height="100" fill="#f06"/> 
<!--x表示橫座標，y表示縱座標，width表示寬，height表示高-->

clipboard.png

擴展用法html

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

二、圓

基本用法react

<circle cx="100" cy="50" r="100" fil='#f06'/>            
<!-- cx表示圓心橫座標，cy表示圓心縱座標，r表示半徑 -->

clipboard.png

擴展用法jquery

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

三、橢圓

基本用法web

<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/>  
<!-- cx表示圓心橫座標，cy表示圓心縱座標，rx表示橫向半徑，ry表示縱向半徑 -->

clipboard.png

擴展用法svg

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

四、直線

基本用法動畫

<line x1="0" y1="100" x2="100" y2="0"/>    
<!-- x1起點橫座標，y1表示起點縱座標，x2表示終點橫座標，y2表示終點縱座標 -->

clipboard.png

擴展用法url

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

五、多邊形

基本用法spa

<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

擴展座標3d

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

第一個點和最後一個點會鏈接起來，造成閉合的圖形

六、折線

基本用法

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

第一個點不會和最後一個點連起來，不會閉合

4、圖形元素用法

一、路徑

路徑是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.一、貝塞爾曲線(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.二、圓弧

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

二、文本

基本用法

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

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

四、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已經指定了，因此沒法覆蓋。

5、容器元素用法

一、連接元素

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

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

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

四、<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>元素內的全部座標都相對於應用蒙版的元素的邊界框。

五、<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%);  //多邊形，每個爲一個頂點

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

七、<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元素自己沒有呈現。

八、<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：容許指定一個給定的一組圖形伸展以適應特定的容器元素。

6、視口 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>]
clipboard.png

除了 <image> 元素以外，其餘元素使用preserveAspectRatio必須在同一元素上爲 viewBox 提供的值。若是沒有提供屬性 viewBox ，則忽略了preserveAspectRatio。

7、漸變

分爲線形漸變和徑向漸變，漸變自己不會渲染，必須經過具體元素的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>

8、濾鏡

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

比較複雜，用的也比較少，使用時能夠查找文檔
svg 濾鏡

9、動畫和交互性

動畫被棄用，請使用css animations或者web animations代替

10、事件

最經常使用的是 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>

11、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;
}

12、好用的svg庫

一、svg.js

svg.js更加接近原生svg語法，能夠直觀的操做svg。svg.js更快，兼容性好，上手更方便。

二、Snap.svg

Snap.svg更接近jquery的語法，來操做svg。Snap.svg更全，功能豐富。

參考文檔: https://developer.mozilla.org...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程