SVG 入門及實踐

時間  2019-11-10
標籤 svg 入門 實踐 简体版
原文   原文鏈接

SVN基本結構

<html>
<body>

<h1>My first SVG</h1>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9;" />
</svg>

</body>
</html>

SVG 路徑 -

元素應該是 SVG 中最多見的形狀。你能夠經過 path 元素繪製矩形（直角矩形或者圓角矩形）、圓形、橢圓、折線形、多邊形，以及一些其餘的形狀。 javascript

元素用於定義一個路徑。 html

下面的命令可用於路徑數據：java

- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath

注意：以上全部命令均容許小寫字母。大寫表示絕對定位，小寫表示相對定位。app

下面是一個path的實例：ide

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <path d="M150 0 L75 200 L225 200 Z" /> 
</svg>

旋轉的文字：svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> 
</svg>

路徑上的文字：svn

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
   <defs> 
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> 
  </defs> 
  <text x="10" y="100" style="fill:red;"> 
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath> 
  </text> 
</svg>

文字分組換行：post

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <text x="10" y="20" style="fill:red;">Several lines: 
    <tspan x="10" y="45">First line</tspan> 
    <tspan x="10" y="70">Second line</tspan> 
  </text> 
</svg>

文字做爲連接：測試

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <a xlink:href="//www.w3cschool.cn/svg/" target="_blank"> 
    <text x="0" y="15" fill="red">I love SVG</text> 
  </a> 
</svg>

SVG Stroke 屬性

SVG提供了一個範圍普遍stroke 屬性。在本章中，咱們將看看下面：動畫

- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray

全部stroke屬性，可應用於任何種類的線條，文字和元素就像一個圓的輪廓。

SVG 濾鏡

在本教程中，咱們將僅展現一個可能採用的特殊效果。基礎知識展現後，你已經學會使用特殊效果，你應該可以適用於其餘地方。這裏的關鍵是給你一個怎樣作SVG的想法，而不是重複整個規範。

SVG可用的濾鏡是：

- feBlend - 與圖像相結合的濾鏡
- feColorMatrix - 用於彩色濾光片轉換
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - 過濾陰影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight - 用於照明過濾
- fePointLight - 用於照明過濾
- feSpotLight - 用於照明過濾

Remark 除此以外，您能夠在每一個 SVG 元素上使用多個濾鏡！

使用濾鏡的實例：

1.模糊效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

代碼解析：

  • 元素id屬性定義一個濾鏡的惟一名稱
  • 元素定義模糊效果
  • in="SourceGraphic"這個部分定義了由整個圖像建立效果
  • stdDeviation屬性定義模糊量
  • 元素的濾鏡屬性用來把元素連接到"f1"濾鏡

2.陰影效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

實現陰影效果分爲四個步驟：

1首先經過feoffset濾鏡實現圖形的複製偏離;

2.經過feBlend濾鏡對源圖形以及複製的偏離圖形作圖像混合處理;

3.經過feColorMatrix濾鏡對陰影顏色作矩陣計算；

4.經過feGaussianBlur濾鏡實現模糊效果；

SVG動畫

實例1：（重複用 5 秒時間淡出的矩形）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

實例2：（矩形會變大並改變顏色）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime"> 
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> 
    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> 
    <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> 
    <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> 
    <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
  </rect>
</svg>

實例3：（沿一個運動路徑移動、旋轉並縮放的文本 + 逐步放大並改變顏色的矩形）

<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime"> 
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> 
    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> 
    <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> 
    <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> 
    <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
  </rect>
  <g transform="translate(100,100)"> 
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
      <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
      <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
      <animateColor attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" /> 
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" /> 
      <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" /> 
    </text> 
  </g>
</svg>

</body>
</html>

與javascript交互

經過getSVGDocument()獲取svgDocument

function setup (document) {
// do something with svg docuemnt
}
 
setup(document.getElementById('svg-embed').getSVGDocument());

獲取了SVG的document以後，就能夠像往常那樣獲取內部元素屬性、綁定事件等等。還能夠定義一個document爲參數的方法造成局部變量，要對某個引入SVG文檔進行操做時就獲取該文檔的document對象傳入，想獲取主文檔的對象時就使用window.document便可

須要注意的是，要操做SVN就須要知足同源策略；

通常在javascript中動態建立DOM元素能夠經過createElement方法來建立，可是用這個API來建立SVN元素是不會生效並展現的；

這是由於建立SVG元素須要指定命名空間，就像須要在svg標籤上設定xmlns爲http://www.w3.org/2000/svg。正確的構造方式是調用createElentNS()方法，並將」http://www.w3.org/2000/svg」做爲第一參數傳入。

此外，不一樣於HTML元素對象能夠直接對一些屬性賦值，SVG元素對象都須要經過調用setAttribute()方法來設定屬性值。由於大部分屬性都是SVGAnimatedLength類型，即便要經過屬性賦值也要寫成相似c.r.baseVal.value
= 7，多層訪問其下屬性。不過像fill、stroke等默認都是undefined，因此使用setAttribute()是更好的選擇。

<svg xmlns="http://www.w3.org/2000/svg"    
xmlns:xlink="http://www.w3.org/1999/xlink"    
version="1.1" width="20" height="20">    
   <script type="text/javascript">         
       var c = document.createElementNS('http://www.w3.org/2000/svg','circle');                c.setAttribute('cx', 10);        
       c.setAttribute('cy', 10);        
       c.r.baseVal.value = 7;        
       c.setAttribute('fill', 'green');         
       document.rootElement.appendChild(c);    
   </script>
</svg>

經過setAttributeNs()設置屬性

除了元素有命名空間，有些屬性也有其特定的命名空間。好比在HTML極爲經常使用的a標籤的，在SVG中又有存在，可是對於其href屬性，在SVG之中就必須加上xmlns:前綴來指定其命名空間了。對於設置這些屬性也須要用setAttributeNS()方法並將」http://www.w3.org/1999/xlink「做爲第一參數傳入。

var a = document.createElementNS('http://www.w3.org/2000/svg','a');        a.setAttributeNS('http://www.w3.org/1999/xlink',
    'xlink:href', 
    'http://blog.iderzheng.com/');

SVG與窗口座標系的轉換

這個內容要測試加深理解

function click(e) {    
    // rootElement is specific to SVG document    
    // documentElemnt is to any XML document include HTML    
    // they both can retrieve the root element of a document     
    var r = document.rootElement || document.documentElement,    
    pt = r.createSVGPoint(),    
    im = r.getScreenCTM().inverse(); 
    // inverse of tranforma matrix     
    // set point with window coordination    
    pt.x = e.clientX;    
    pt.y = e.clientY;     
    // convert point to SVG coordination    
    var p = pt.matrixTransform(im);
}

動畫開發

輔助性的腳本庫：TweenMax.min.js

參考網站：https://tympanus.net/codrops/?s=svg&search-type=posts

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