SVG入門

時間 2019-11-19

標籤 svg 入門简体版

原文原文鏈接

SVG已經出來好多年了，其實我也知道很久了~_~不過一直沒用過，平時一直都是切設計師給的效果圖寫頁面。css

最近設計師作網頁改版，裏面有些相似小框框，小圖標等須要一些動畫效果，一開始我只是想純粹的用css3動畫作出來，可是感受效果很是low，尤爲是在作折線的過分時，醜哭我了。無奈只好搬出來想學習良久的SVG，小白進修中。。。html

說到SVG，仍是先囉嗦一下它的意思吧！css3

SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。就是你們所熟悉的可伸縮矢量圖形 (Scalable Vector Graphics)。瀏覽器

與其餘圖像格式相比，使用 SVG 的優點在於：css3動畫

SVG 可被很是多的工具讀取和修改（好比記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不降低的狀況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
SVG 能夠與 Java 技術一塊兒運行
SVG 是開放的標準
SVG 文件是純粹的 XML

查看 SVG 文件

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。svg

IE8和早期版本都須要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。工具

廢話很少說，直切主題！學習

1.關於svg的引入動畫

我如今主要是針對的HTML頁面的使用，因此也就直接在HTML裏直接引用了。ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg1</title>
</head>
<body>
    <h1>My first SVG</h1>
    <!-- 在Firefox、Internet Explorer九、谷歌Chrome和Safari中，你能夠直接在HTML嵌入SVG代碼。 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="50" r="40" stroke="#333" stroke-width="2" fill="#ff0000" />
          <!-- 另外一種樣式寫法 -->
      <!-- <circle cx="100" cy="50" r="40" style="stroke:#333;stroke-width=2;fill:#ff0000;" /> -->
    </svg>
</body>
</html>

注意：svg不能直接嵌入到Opera裏面。

2.開始繪製

知道了怎麼引入svg，下面就要開始繪製了。

舉個例子！

我要繪製一個矩形：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:#ccc;stroke-width:2;stroke:#333" />
</svg>
 
</body>
</html>

顯示爲：

可是，有點問題啊！不知道各位有沒有發現.

繪製的時候，我一開始就遇到了個問題，好比我畫矩形的時候，寬300，高100，邊框寬度2，可是在瀏覽器打開時，邊框顯示很不正常。心想多是太細了吧，開始加粗，越粗越不像樣。。。。

原來。。。根據瀏覽器，svg會有自身默認的畫布（乾脆叫作畫布吧）大小，這個大小好像也不太固定。因此解決的辦法是給svg根元素裏設置它的畫布大小，這個最好一開始就設置上，根據本身大小的需求設置。

以下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='500' height='500' style="outline: 5px solid #ccc;">
  <rect width="300" height="100" style="fill:#ccc;stroke-width:2;stroke:#333" />
</svg>

效果就是：

這樣邊框就顯示正常了，以後所繪製的圖形也會出現一樣的效果，但願你們當心哈！

好啦！入門就到這裏，其餘圖形的小練習，好比圓形，直線，多邊形等，就參考一下http://www.runoob.com/svg/svg-rect.html，作繼續練習吧！

其中的fill-rule填充規則參考 http://blog.csdn.net/cuixiping/article/details/7848369;

3.svg路徑

關於繪製複雜曲線，能夠使用svg的路徑path來繪製。例如：

<path d="M10 10L90 90" stroke="#000000" style="stroke-width: 5px;"></path>

其中 d 是屬性名；

路徑畫虛線的方法：
<path stroke-dasharray="5,5" d="M5,20l25,0" /> 其中：第一個是每一個虛線的長度，第二個是虛線之間的間隔。

path的幾種路徑：

其中：字母大寫表示的是絕對位置，小寫是相對位置。

例1：SC曲線

<path d="M 100 400 L 100 100 L 200 200 C 300,400 400,400 500,200 S 700,0 800,200" fill="none" stroke='#ff0000' stroke-width='2'/>

效果圖:

其中：綠色的線是使用S路徑時自動添加的與C路徑對稱的線。

例2：QT曲線

<path d="M100,100 Q200,200 300,100 T 500,100" stroke-width="2" stroke="blue" fill='none'/>

其中：綠線爲使用T路徑時自動對稱的點。

小效果1：

<!-- 使文字按照路徑展現，能夠實現文字個性展現 -->
        <defs>
            <path id="path1" d="M20,20 S100,150 200,10" />
        </defs>
        <text x="10" y="100" style="fill:red;">
            <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
        </text>

效果2：

<text x="550" y="400" fill="red" font-size="30" >你好
            <!-- 使字按着路徑方向運動 -->
            <animateMotion path="M 0 0 L 100 -100 L100 -200" dur="5s" fill="freeze" />
        </text>

祝你好運！

1. SVG入門
2. SVG動畫入門
3. SVG入門—如何手寫SVG
4. svg入門學習回顧
5. SVG 線條動畫入門
6. SVG 入門及實踐
7. SVG 2D入門10 - 濾鏡
8. SVG 圖像入門教程
9. SVG Sprite 入門（SVG圖標解決方案）
10. svg入門：使用js去操做svg圖像
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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