SVG筆記

時間 2019-11-17

標籤 svg 筆記简体版

原文原文鏈接

SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格聽從XML語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。（網上抄的）css

案例（svg.svg）html

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

</svg>

代碼解釋：

第一行包含了 XML 聲明。請注意 standalone 屬性！該屬性規定此 SVG 文件是不是「獨立的」，或含有對外部文件的引用。瀏覽器

standalone="no" 意味着 SVG 文檔會引用一個外部文件 - 在這裏，是 DTD 文件。網絡

第二和第三行引用了這個外部的 SVG DTD。該 DTD 位於「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd」。該 DTD 位於 W3C，含有全部容許的 SVG 元素。ide

SVG 代碼以 <svg> 元素開始，包括開啓標籤 <svg> 和關閉標籤 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。關閉標籤的做用是關閉 SVG 元素和文檔自己。（網上抄的）svg

在瀏覽器中打開：動畫

教程詳情請看阮一峯大神的博客和菜鳥教程編碼

簡單的筆記：url

1.svg能夠直接插入HTML文件中也能夠做爲一個單獨的.svg文件引入spa

　　直接插入HTML文檔的方式：

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg  xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

View Code

　　做爲一個單獨文件引入到HTML文檔的方式：

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
//註釋：假如您安裝了最新版本的 Adobe SVG Viewer，那麼當使用 <object> 標籤時 SVG 文件沒法工做（至少不能在 IE 中工做）！

<embed id="embed" src="icon.svg" type="image/svg+xml">
//註釋：當在 HTML 頁面中嵌入 SVG 時使用 <embed> 標籤是 Adobe SVG Viewer 推薦的方法！然而，若是須要建立合法的 XHTML，就不能使用 <embed>。任何 HTML 規範中都沒有 <embed> 標籤。

<iframe id="iframe" src="icon.svg"></iframe>
//<iframe> 標籤可工做在大部分的瀏覽器中。

View Code

　　寫入css中：

<span class="svg"></span>

span.svg{
  display: inline-block;
  height: 100px;
  width: 100px;   
  background: url(svg.svg);     
}

View Code

　　SVG 文件還能夠轉爲 BASE64 編碼，而後做爲 Data URI 寫入網頁

<img src="data:image/svg+xml;base64,[data]">

Code

SVG的形狀：

矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>

2.標籤：

　　2.1: <svg>標籤：根標籤

　　　　<svg width="100" height="100" viewBox="50 50 50 50"></svg>

　　　　width/height: 圖片的寬度/高度；viewBox:視口的左上角起始位置和寬高

　　2.2: SVG的css屬性

　　　　fill:圖形的填充顏色，stroke: 邊框的顏色； stroke-width: 邊框的寬度

　　2.3：<circle>標籤：圓形標籤

　　　　<circle cx="30" cy="50" r="25" class="circle" fill="red" stroke="black" stroke-width="1" style=""/>

　　　　cx/cy: 圓心的位置； r: 圓的半徑；

　　　　若是直接插入HTML文件中能夠定義class，方便書寫樣式，若爲svg爲單獨文件則不能經過類來操做其樣式（試了下），可是能夠書寫行間樣式

　　2.4：<line>標籤：繪製直線

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

　　　　x1/y1: 起點橫縱座標； x2/y2：終點橫縱座標

　　2.5：<polyline>標籤：繪製折線

　　　　point：屬性指定了每一個端點的座標，橫座標與縱座標之間與逗號分隔，點與點之間用空格分隔。

　　2.6：<rect>標籤：繪製矩形

　　　　<rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />

　　　　x/y：起始座標； height/width：寬高

　　2.7：<ellipse>標籤：繪製橢圓

　　　　<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>

　　　　cx/cy：橢圓的圓心； rx/ry：橢圓橫軸和縱軸的半徑

　　2.8：<polygon>標籤：繪製多邊形

　　　　<polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>

　　　　points屬性指定了每一個端點的座標，橫座標與縱座標之間與逗號分隔，點與點之間用空格分隔

　　2.9：<path>標籤：繪製路徑（詳情）

M：移動到（moveto）L：畫直線到（lineto）Z：閉合路徑

　　　　<path d=" 　　 　M 18,3 　　 L 46,3 　　 L 46,40 　　 L 61,40 　　 L 32,68 　　 L 3,40 　　 L 18,40 　　 Z "></path>
　　　　d屬性表示繪製順序，它的值是一個長字符串，每一個字母表示一個繪製動做，後面跟着座標；　　　　d

　　2.10：<text>標籤：繪製文本
　　　　<text x="50" y="25">Hello World</text>
　　　　　x屬性和y屬性，表示文本區塊基線（baseline）起點的橫座標和縱座標。文字的樣式能夠用class或style屬性指定;
xyclassstyle

 　2.11：<use>標籤：複製形狀

<circle id="myCircle" cx="50" cy="50" r="40" />
<use href="#myCircle" x="8" y="100" fill="red" />

　　2.12： <g>標籤：形狀組

<g id="myCircle">
    <text x="25" y="20">圓形</text>
    <circle cx="50" cy="50" r="20" fill="red" />
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
//「fill=blue」屬性只能賦值給<text>元素（<circle>有本身的fill屬性覆蓋了外層屬性賦值）

　　2.13：<defs>標籤：用於自定義形狀，它內部的代碼不會顯示，僅供引用。<defs>

<svg width="300" height="100">
  <defs>
    <g id="myCircle">
      <text x="25" y="20">圓形</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>

  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

2.14：<pattern>標籤用於自定義一個形狀，該形狀能夠被引用來平鋪一個區域<pattern>

<defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
 </defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />

效果：



2.15：<animate>標籤：用於產生動畫效果<animate>

<circle cx="50" cy="50" r="50" fill="red">
    <animate attributeName="r" from="0" to="50" dur="2s" repeatCount="indefinite" />
</circle>

attributeName：發生動畫效果的屬性名。
from：單次動畫的初始值。
to：單次動畫的結束值。
dur：單次動畫的持續時間。
repeatCount：動畫的循環模式。

2.16：<animateTransform>標籤：用於<animateTransform>變形

<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
  </rect>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。