關於SVG的一點點學習

原文地址：https://zhuanlan.zhihu.com/p/25016633

<?xml version="1.0" standalone="no"?>
<svg width="600" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!--矩形-->
  <rect x="10" y="10" width="30" height="60" stroke="#9B7B56" fill="transparent" stroke-width="10"/>

x，y爲起點座標值，width,height爲高度和寬度值。（似乎svg有默認的margin之類的東西？）stroke是邊框顏色，fill是填充，也可設置顏色。

stroke-width是寬度

  <!--圓角矩形-->
  <rect x="60" y="10" rx="10" ry="10" width="60" height="40" stroke="#FF9090" fill="transparent" stroke-width="5"/> 

圓角矩形的圓角也是可以設成橢圓形的，用rx,ry指定即可。

  <!--圓形-->
  <circle cx="180" cy="50" r="40" stroke="green" fill="#C3413D" stroke-width="5"/>  
   <!--橢圓-->
  <ellipse cx="320" cy="28" rx="80" ry="20" stroke="#FFC302" fill="transparent" stroke-width="5"/> 
  <!--直線-->
  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <!--折線-->
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" 
            stroke="#9B7B56" 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="#FFC302" fill="transparent" stroke-width="5"/>
  <!--路徑 -->
  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="#9B7B56" stroke-width="5"/>
M爲移動命令，Q爲二次貝塞爾曲線，後跟兩個點座標。T爲平滑二次曲線的縮寫
</svg>

多邊形是閉合的，折線不是。

其他重要元素

• <svg>：SVG的根元素，並且可以相互嵌套；
• <g>：用來將SVG中的元素進行分組操作，分組後可以看成一個單獨的形狀，統一進行轉換，同時g元素的樣式可以被子元素繼承，但是它沒有X,Y屬性，不過可以通過transform來移動它；
  
• <def>：用於定義在SVG中可重用的元素，def元素不會直接展示出來，可以通過use元素來引用；
• <use>：通過它來複用def元素，也包括<g>、<symbol>元素，使用<use xlink: href="#id"/>即可調用；
• <text>：可以用它來實現word中的那種“藝術字”，很神奇的一個功能；
• <image>：用它可以在SVG中嵌套對應的圖片，並可以在圖片上和周圍做對應的處理。

輪廓 stroke

stroke用於設置繪製對象線條的顏色，同時stroke有如下屬性：

• stroke-width：設置輪廓的寬度；
  
• stroke-linecap：設置輪廓結尾處的渲染方式，value有butt(直接一刀切斷)、square(保留一點切斷)、round(圓弧切斷) 3個設置值；
  
• stroke-linejoin：用於設置兩條線之間的連接方式，value有miter(尖角連接)、round(圓弧連接)、bevel(切斷連接) 3個設置值；
  
• stroke-opacity：用於設置描邊的不透明度；
• stroke-dasharray + stroke-dashoffset：stroke-dasharray用於使用虛線呈現SVG形狀的描邊，需要提供一個數值數組來描述，定義破折號和空格的長度；stroke-dashoffset用於設置虛線模式中的開始點；

填充 fill

fill用來描述SVG對象內部的顏色，除此還有如下兩個屬性：

• fill-opacity：用於設置填充顏色的不透明度；
  
• fill-rule：用於設置填充的方式，value有nonzero、evenodd 兩個值
  
  • nonzero：從一個點往任何方向上繪製一條射線，形狀中的路徑每次穿過此射線時，如果路徑從左到右穿過射線，則計數器加1，如果路徑從右到左穿過射線，則計數器減1。計數器總數爲0時候，則該點被認爲在路徑外。如果計數器非0，則該點被認爲在路徑內。
    
  • evenodd：從一個點往任何方向上繪製一條射線。每次路徑穿過射線，計數器加1。如果總數是偶數，則點在外部。如果總計數爲奇數，點在形狀內。
    

變換 transform

此屬性和css3中的transform相類似，有translate、rotate、scale、skew(skewX和skew函數使x軸和y軸傾斜)、matrix(矩陣變換

五、動畫

在SVG中動畫元素主要分成如下4類，同時也可以自由組合。

• <set>：用於設置延遲，譬如設置5s後元素位置顏色變化，但是此元素沒有動畫效果；
• <animate>：基礎動畫屬性，用於實現單屬性的動畫過度效果；
• <animateTransform>：實現transform變換動畫效果，可以類比CSS3中的transform；
• <animateMotion>：實現路徑動畫效果，讓元素沿着對於path運動；

有了元素以後還需要有對應的屬性用來表示動畫的特徵，譬如：要動畫的元素屬性名稱、起始值、結束值、變化值、開始時間、結束時間、重複次數、動畫速度曲線函數等等。

六、使用方式

我們可以使用如下4種常用的方式來加載我們的SVG，此處可以將svg轉換成base64的方式。

通過Img標籤：

<img src="tw93.svg" alt="Hello SVG" height="65" width="68">

通過CSS background：

.logo {
  background: url("data:image/svg+xml;base64,[data]");
}

通過object：

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data]">
  fallback
</object>

直接內置到Html中

不想學了，啥都不想學了。