svg 日常操作

本文轉載自查看原文 2018-03-04 13:40 1022 Html&Css/ svg

創建svg 文件

1 <svg>
2   xmlns='http://www.w3.org/2000/svg'  #標頭 必須
　　# SVG就像是我們的顯示器屏幕，viewBox就是截屏工具選中的那個框框，最終的呈現就是把框框中的截屏內容再次在顯示器中全屏顯
　 # viewBox="x, y, width, height" // x:左上角橫坐標，y:左上角縱坐標，width:寬度，height:高度 此處的值與 path 路徑的值相關連
3   viewBox='0 0 64 64'    
　　 version="1.1" #版本號
4   width='64' height='64'　　#svg 大小尺寸 如果想圖像形狀不變，只改變大小 修改 width height
5   fill='currentcolor'>　　　#填充顏色
6   <path d='M8 26 L32 50 L56 26 L34 6 L32 4 Z' /> #path 路徑 這個地方可以放 svg 的子標簽
7 </svg>

詳解viewBox SVG Viewport、View Box和preserveAspectRatio

形狀

　標簽內的值可以是百分比，也可以直接是數值

矩形 <rect>
- 必選： width height # 寬高
- 可選： x y stroke style fill rx ry
  - x ,y 畫布的起始 x y 位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
  - rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
  - style 屬性用來定義 CSS 屬性
  - CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
  - CSS 的 stroke 屬性定義矩形邊框的
  - rx ,ry 圖像圓角
圓形 <circle>
- 必選：r #屬性定義圓的半徑
- 可選：cx cy
  - cx和cy屬性定義圓點的x和y坐標。如果省略cx和cy，圓的中心會被設置為(0, 0)
橢圓 <ellipse>
- 必選：rx ry #橢圓中心的x y 坐標
- 可選：cx cy
  - CX屬性定義的橢圓中心的x坐標；如果省略cx和cy，圓的中心會被設置為(0, 0)
  - CY屬性定義的橢圓中心的y坐標
線 <line>
- 必選：x2 y2
多邊形 <polygon>
- 必選：polygon 至少 2組點
  - points 點的坐標每兩個算是一組組與組之間可以使用逗號做間隔
  - 折現的交換點在線段末尾的中心點(將繪制的線段放大可以觀察到)並且在閉合路徑(將結束點設置為起始點 )的時候會出現問題
  - 多邊形具有自動閉合的左右,可以實現完美閉合並且不用將結束點設置為起始點
  - SVG的圖形填充規則通過fill-rule屬性來指定（提供兩種選項用於指定如何判斷圖形的"內部"）
    - 有效值：nonzero | evenodd | inherit 默認：nonzero
      http://www.runoob.com/svg/svg-polygon.html
折線 <polyline> (曲線) 元素是用於創建任何只有直線的形狀
- 必選：至少2組點
路徑 <path> http://www.cnblogs.com/xuey/p/8492498.html

文本

文本<text>
- 必選： x y fill
  - x 起始位置
  - y 起始位置
  - fill 填充顏色
文本路徑<textPath>作用就是放在<text>標記內部引用預定義的<path>，引用時，我們需要使用xlink:href屬性指明需要引用的路徑的ID。在SVG里，處理能沿直線方向寫文字外，還能夠使用<path>先定義一條路徑，讓文字沿着定義好的路徑排列

 1 <svg width="100%" height="100%" viewBox="0 0 1000 300"
 2      xmlns="http://www.w3.org/2000/svg" 
 3      xmlns:xlink="http://www.w3.org/1999/xlink">
 4   <defs>
 5     <path id="MyPath"
 6           d="M 100 200 
 7              C 200 100 300   0 400 100
 8              C 500 200 600 300 700 200
 9              C 800 100 900 100 900 100" />
10   </defs>
11 
12   <use xlink:href="#MyPath" fill="none" stroke="red"  />
13 
14   <text font-family="Verdana" font-size="42.5">
15     <textPath xlink:href="#MyPath">
16       我先往上去，然后往下去，然后再往上去，漂亮吧！
17     </textPath>
18   </text>
19 
20   <!-- Show outline of the viewport using 'rect' element -->
21   <rect x="1" y="1" width="998" height="298"
22         fill="none" stroke="black" stroke-width="2" />
23 </svg>

<tspan>標記的作用是將一段文本包裹起來，你可以對這段包裹的文字的顏色、位置、形狀等特征進行單獨的修飾，它跟HTML標記<span>的作用非常相似

 1 <style>
 2     text{font: 20px Verdana, Helvetica, Arial, sans-serif;}
 3     tspan{  fill: red; font-weight: bold}
 4 </style>
 5 <svg width="250" height="100" viewBox="0 0 250 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
 6     <text x="15" y="30">你丫的
 7       <tspan>不是</tspan> 
 8       一個香蕉
 9     </text>
10 </svg>

stroke 屬性

- stroke 顏色
- stroke-width 寬度
- stroke-linecap 不同類型的開放路徑的終結
  - butt 直角原狀態
  - round 圓角
  - square 加長方角（點的重合）
- stroke-dasharray 用於創建虛線
  - 一個參數時：表示一段虛線長度和每段虛線之間的間距 / 定義描邊的虛線長度，如果提供奇數個，則會自動復制該值成偶數
  - 兩個參數或者多個參數時：一個表示長度，一個表示間距/第一個為虛線的寬度第二個是虛線之間的間距
- stroke-dashoffset 定義虛線描邊的偏移量

濾鏡 fe 后綴可用於所有的濾鏡濾鏡調試 http://jorgeatgu.github.io/svg-filters/

<feGaussianBlur> 元素是用於創建模糊效果
- <defs>元素定義短並含有特殊元素（如濾鏡）定義
- <filter>標簽用來定義SVG濾鏡
  - <filter>元素id屬性定義一個濾鏡的唯一名稱
  - <feGaussianBlur>元素定義模糊效果
  - in="SourceGraphic"這個部分定義了由整個圖像創建效果
  - stdDeviation屬性定義模糊量
  - <rect>元素的濾鏡屬性用來把元素鏈接到"f1"濾鏡 filter="url(#f1)"

<feOffset>元素是用於創建陰影效果

<filter>元素id屬性定義一個濾鏡的唯一名稱

例子：

1 <defs>
2     <filter id="f1" x="0" y="0" width="200%" height="200%">
3       <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
4       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
5       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
6     </filter>
7   </defs>
8   <rect width="90" height="90" stroke="green" stroke-width="3"
9   fill="yellow" filter="url(#f1)" />

<feOffset>元素的屬性改為"SourceAlpha"在Alpha通道使用殘影，而不是整個RGBA像素

<linearGradient>元素用於定義線性漸變
- <linearGradient>標簽必須嵌套在<defs>的內部。
- <defs>標簽是definitions的縮寫，它可對諸如漸變之類的特殊元素進行定義。
- 線性漸變可以定義為水平，垂直或角漸變：
  - 當y1和y2相等，而x1和x2不同時，可創建水平漸變
  - 當x1和x2相等，而y1和y2不同時，可創建垂直漸變
  - 當x1和x2不同，且y1和y2不同時，可創建角形漸變
  - <linearGradient>標簽的id屬性可為漸變定義一個唯一的名稱
  - <linearGradient>標簽的X1，X2，Y1，Y2屬性定義漸變開始和結束位置
  - 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個<stop>標簽來規定。offset屬性用來定義漸變的開始和結束位置。
  - 填充屬性把 ellipse 元素鏈接到此漸變
  - 例子：
  - ```
  1 <defs>
  2     <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
  3       <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  4       <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  5     </linearGradient>
  6   </defs>
  7   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
```

<radialGradient>元素用於定義放射性漸變

<radialGradient>標簽的 id 屬性可為漸變定義一個唯一的名稱
CX，CY和r屬性定義的最外層圓和Fx和Fy定義的最內層圓
漸變顏色范圍可以由兩個或兩個以上的顏色組成。每種顏色用一個<stop>標簽指定。offset屬性用來定義漸變色開始和結束
填充屬性把ellipse元素鏈接到此漸變
例子：

1 <defs>
2     <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
3       <stop offset="0%" style="stop-color:rgb(255,255,255);
4       stop-opacity:0" />
5       <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
6     </radialGradient>
7   </defs>
8   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

<pattern>圖像做背景填充形狀
- pattern
  - userSpaceOnUse: 使用百分比配置

　　　　　　　　　　另一種是將pattern的寬度和高度固定住，在指定區域內平鋪，能鋪多少鋪多少，超出部分裁掉。對應的屬性為patternUnits="userSpaceOnUse"。相應的width和height即pattern的寬度和高度。需要注意的是，userSpaceOnUse的pattern並不會在每個指定區域(形狀元素)內重新以區域左上角開始排序。userSpaceOnUse的pattern的起點坐標只有一個，就是其x和y表示的在svg畫布坐標系中的位置。

- - objectBoundingBox: 使用寬高值配置

　　　　　　　　　　我們通過指定width和height來間接規定圖案平鋪的數量。因為這時，width和height被限制在0~1，或者0%~100%之間，即寬度或高度占填充區域高度或寬度的百分比。可想而知20%放5個，40%放2.5個;patternUnits並不會對內部的圖案做縮放;默認情況下，pattern圖案會將填充區域的左上角作為起點坐標(origin point)(0,0)。當然也可以通過設置x和y屬性的值改變這個起點坐標。x和y分別表示相對於起點坐標的偏移量。在patternUnits="objectBoundingBox"情況下，x和y的值乘以填充區域相應的寬度和高度，即為實際起點坐標偏移量。

 1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2     <defs>
 3         <pattern id="avatar" x="0" y="0" width="100%"  height="100%" patternContentUnits="objectBoundingBox">
 4             <image width="1" height="1" xlink:href="http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb"/>
 5         </pattern>
 6         <style>
 7             circle, rect {
 8                 stroke: #ff9900;
 9                 stroke-width: 5px;
10             }
11         </style>
12     </defs>
13     <g>
14         <circle cx="100" cy="100" r="50" fill="url(#avatar)"/></circle>
15         <rect x="10" y="10" rx="20" ry="20" width="100" height="100" fill="url(#avatar)"/></rect>
16     </g>
17    </svg>

patternContentUnitspattern的縮放和排布由patternUnits控制，

　　而pattern內部的圖案的縮放和排布由patternContentUnits控制。

　　patternContentUnits也有兩個屬性：objectBoundingBox和userSpaceOnUse（默認屬性值）

objectBoundingBox
- 在userSpaceOnUse模式下，pattern內部元素的大小不會因為pattern的縮放而改變。userSpaceOnUse是patternContentUnits的默認屬性值
objectBoundingBox
- 在objectBoundingBox模式下，pattern內部元素所有屬性的數值都會根據設置的比例，乘以pattern的width或height計算出實際長度。pattern內部元素所有屬性的數值如果后面不帶百分號%，都乘上100作為百分比數。所以像stroke-width默認值是1的這種屬性，如果不指定一個數值，就會被當成100%來計算，結果就是撐滿整個pattern。

 1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2         <defs>
 3             <pattern id="tile1" patternUnits="objectBoundingBox"  x="0" y="0" width=".2" height=".2" patternContentUnits="objectBoundingBox">
 4                 <path d="M 0 0 Q .05 .2 .1 .1 T .2 .2" style="stroke: black; fill: none; stroke-width: .01;"></path>
 5                 <path d="M 0 0 h .2 v .2 h-.2z" style="stroke: black; fill: none; stroke-width: .01;"></path>
 6             </pattern>
 7         </defs>
 8         <g transform="translate(20,20)">
 9             <rect x="0" y="0" width="100" height="100" style="fill:url(#tile1); stroke: black;"></rect>
10         </g>
11         <g transform="translate(135,20)">
12             <rect x="0" y="0" width="70" height="80" style="fill:url(#tile1); stroke: black;"></rect>
13         </g>
14         <g transform="translate(220,20)">
15             <rect x="0" y="0" width="150" height="80" style="fill:url(#tile1); stroke: black;"></rect>
16         </g>
17 </svg>

pattern中內嵌pattern

允許在一個pattern中的元素內，嵌入另一個pattern

 1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2     <defs>
 3         <pattern id="stripe" x="0" y="0" width=".2" height=".3333" patternContentUnits="objectBoundingBox">
 4             <path d="M0 0h1" stroke="grey" stroke-width=".01"></path>
 5             <path d="M0 0v1" stroke="grey" stroke-width=".01"></path>
 6         </pattern>
 7         <!-- 可以在pattern的屬性中使用viewBox完全替代patternContentUnits="objectBoundingBox" 
 8         如果有viewBox屬性，patternContentUnits屬性將被忽略 
 9         viewBox: x y w h -->
10         <pattern id="circle" x="0" y="0" width=".2" height=".25" viewBox="0 0 50 40">
11             <circle cx="20" cy="20" r="15" fill="url(#stripe)" stroke="black"></circle>
12         </pattern>
13     </defs>
14     <path d="M0 0 h300v300h-300z" fill="url(#circle)" stroke="black"></path>
15 </svg>

結構元素

<defs>定義元素
- SVG 允許我們定義以后需要重復使用的圖形元素。建議把所有需要再次使用的引用元素定義在defs元素里面。這樣做可以增加SVG內容的易讀性和可訪問性。在defs元素中定義的圖形元素不會直接呈現。你可以在你的視口的任意地方利用 <use>或形狀路徑元素呈現這些元素
- 允許的內容物
- 動畫元素
   描述性元素
   形狀元素
   結構化元素
   漸變元素
   <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
- ```
1 <svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="http://www.w3.org/2000/svg">
2   <defs>
3     <linearGradient id="Gradient01">
4       <stop offset="20%" stop-color="#39F" />
5       <stop offset="90%" stop-color="#F3F" />
6     </linearGradient>
7   </defs>
8   <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)"  />       
9 </svg> 
```
<use>標記的作用是能從SVG文檔內部取出一個節點，克隆它，並把它輸出到別處，例子：

 1   <svg width="100%" height="300" xmlns="http://www.w3.org/2000/svg" viewBox='0 0 50 100'>
 2   <style>
 3     .classA { fill:red }
 4   </style> 
 5   <defs>
 6     <g id="Port">
 7       <circle style="fill:inherit" r="10"/>
 8     </g>
 9   </defs>
10   <text y="15">black</text>
11   <use x="50" y="10" xlink:href="#Port" />
12   <text y="35">red</text>
13   <use x="50" y="30" xlink:href="#Port" class="classA"/>
14   <text y="55">blue</text>
15   <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
16  </svg>

<symbol>標記的作用是定義一個圖像模板，你可以使用<use>標記實例化它，然后在SVG文檔中反復使用，這種用法非常的高效。<symbol>本身不會輸出任何圖像，只有使用<use>實例化后才會顯示。

 1 <svg viewBox="0 0 150 150" height='300'  xmlns="http://www.w3.org/2000/svg" >
 2 
 3 <symbol id="sym01" viewBox="0 0 150 110">
 4   <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
 5   <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
 6 </symbol>
 7 <use xlink:href="#sym01"
 8      x="0" y="0" width="100" height="50"/>
 9 <use xlink:href="#sym01"
10      x="0" y="50" width="75" height="38"/>
11 <use xlink:href="#sym01"
12      x="0" y="100" width="50" height="25"/>
13 </svg>

<g>標記就是‘group’的簡寫，是用來分組用的，它能把多個元素放在一組里，對<g>標記實施的樣式和渲染會作用到這個分組內的所有元素上。組內的所有元素都會繼承<g>標記上的所有屬性。用<g>定義的分組還可以使用<use>進行復制使用。

1 <svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg">
3    <g stroke="green" fill="white" stroke-width="5">
4      <circle cx="25" cy="25" r="15"/>
5      <circle cx="40" cy="25" r="15"/>
6      <circle cx="55" cy="25" r="15"/>
7      <circle cx="70" cy="25" r="15"/>
8    </g>
9 </svg>

參考手冊：https://www.w3cplus.com/svg-tutorial

http://know.webhek.com/svg/svg-home.html

http://www.runoob.com/svg/svg-tutorial.html

https://developer.mozilla.org/zh-CN/docs/Web/SVG

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201507082192.html

https://segmentfault.com/a/1190000009278935

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 GFS 日常操作 camunda日常操作 C#操作svg圖形（一）——什么是svg RabbitMQ日常維護管理操作 js操作svg整體縮放強大的svg操作庫——Raphael 一個按鍵搞定日常git操作 Redis Cluster日常操作命令梳理 Pandas處理日常EXCEL表格的便捷操作 etcd集群搭建和日常操作