SVG 基礎知識回顧，svg基礎知識回顧

最後更新：2017-04-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

第一次開通部落格，思前想去還是先回顧下去年做比賽作品時學習的SVG動畫。下一篇寫SVG製作動畫總結。

SVG 是使用 XML 來描述二維圖形和繪圖程式的語言。

先瞭解下SVG的優勢：可在任何的解析度下被高品質地列印；映像中的文本是可選的，同時也是可搜尋的（很適合製作地圖）；可以與 Java 技術一起運行；與 JPEG 和 GIF 映像比起來，尺寸更小，且可壓縮性更強；所有瀏覽器均支援 SVG 檔案，不過需要安裝外掛程式的 Internet Explorer 除外，但外掛程式是免費的。

SVG 預定義的形狀元素：

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

<rect> 標籤

x : 矩形的左側位置（例如，x="0" 定義矩形到瀏覽器視窗左側的距離是 0px）;

y : 矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器視窗頂端的距離是 0px）;

rx 和 ry : 可使矩形產生圓角;

fill-opacity: 填充顏色透明度;

stroke-opacity: 定義筆觸顏色的透明度;

opacity: 屬性定義整個元素的透明值

<html><svg width="100%" height="100%" version="1.1"><rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/></svg></html>

<circle> 標籤

cx 和 cy 屬性定義圓點的 x 和 y 座標。如果省略 cx 和 cy，圓的中心會被設定為 (0, 0);
r 屬性定義圓的半徑。

<html><svg width="100%" height="100%" version="1.1">   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg></html>

<ellipse> 標籤

　　cx 屬性定義圓點的 x 座標;
　　cy 屬性定義圓點的 y 座標;
　　rx 屬性定義水平半徑;
　　ry 屬性定義垂直半徑

<html>    <svg width="100%" height="100%" version="1.1">     <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>     </svg></html>

<line> 標籤

　　x1 屬性在 x 軸定義線條的開始;
　　y1 屬性在 y 軸定義線條的開始;
　　x2 屬性在 x 軸定義線條的結束;
　　y2 屬性在 y 軸定義線條的結束

<html>    <svg width="100%" height="100%" version="1.1">         <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>     </svg></html>

<polygon> 標籤

　　<polygon> : 建立含有不少於三個邊的圖形；

　　points : 定義多邊形每個角的 x 和 y 座標

<html>    <svg width="100%" height="100%" version="1.1">        <polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>    </svg></html>

<polyline> 標籤

　　用來建立僅包含直線的形狀

<html>    <svg width="100%" height="100%" version="1.1">        <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>    </svg></html>

<path> 標籤

　　用來定義路徑

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

　　注釋：以上所有命令均允許小寫字母。大寫表示絕對位置，小寫表示相對定位。

定義了一條路徑，它開始於位置 250 150，到達位置 150 350，然後從那裡開始到 350 350，最後在 250 150 關閉路徑。

<html><svg width="100%" height="100%" version="1.1">     <path d="M250 150 L150 350 L350 350 Z" /> </svg></html>

建立了一個螺旋：

<html>    <svg width="100%" height="100%" version="1.1">         <path d="M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314  C142 314 131 322 131 334  C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/>     </svg>        </html>

很複雜吧？是的！！！由於繪製路徑的複雜性，因此還是使用 SVG 編輯器來建立複雜的圖形。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

SVG 基礎知識 回顧，svg基礎知識回顧

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

SVG 基礎知識回顧，svg基礎知識回顧