1 | <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"> |
可以看到上面的code
我們可以看到 我們用svg的標籤把我們所需要的東西全部都包起來
然後我們使用了version 去定義了svg版本為1.1
然後用baseProfile=full去定義了了我們所需要的配置
又定義了xmlns=”http://www.w3.org/2000/svg”這個命名空間
以上這些,雖然不寫也沒差,不過根據MDN的文件,保險起見,還是定義一下
做完上述,我們可以把它存成image.svg,然後可使用object、iframe、img、或css裡的background-image引用,如
1 | <object data="image.svg" type="image/svg+xml" /> |
svg是使用座標系統來定位的
剛剛上面的範例可以看的到,我下了X及Y這兩種屬性,來去定位它的位置
讓我們繼續看下去
1 | <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100"> |
從上面的例子中 我們開了一個200X200的畫布
1 | <svg width="200" height="200" ... |
又使用了rectˊ這個標籤,在svg裡面就是方塊的標籤,x,y起點為20,寬跟高為100像素,並用fill這個屬性填滿藍色
1 | <rect x="20" y="20" width="100" height="100" fill="blue"/> |
這時候一定會問說,阿為什麼右鍵檢查明明就200*200,騙我
因為我們使用了viewBox這個屬性
x跟y起點為0,開了100 X 100的區域,被放到 200 X 200的畫布上,所以就有放大兩倍的效果
fill屬性我們剛剛已經知道了 就一個fill=”你要什麼顏色就填什麼”
然後我們可以透過fill-opacity=”0.5” 來去調整它的透明度
1 | <text x="40" y="40" width="100" height="100">這種若隱若現的感覺</text> |
邊框stroke屬性
1 | <rect width="100" height="100" stroke-width=5 stroke="blue" fill="#07B492" /> |
從上述的利子可以看到,我們建立了一個5px寬的藍色邊框
storke=”你要什麼顏色”
storke-width=”你要多寬”
繪製邊框當然不只這些屬性
1 | <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" |
這邊有三個一樣長的線段
stroke-linecap 控制終點的形狀(看左右兩頭) 提供三種屬性: butt round square
butt就是已跟線的終點一樣長的邊框(切齊),這個是預設,如果你要這樣的話不寫也沒差
round 提供以圓角形式來做結束
square 跟 butt 差不多,但是稍微長一點
stroke-linejoin 屬性,用來控制兩條邊框線段之間,用什麼方式連接。(看轉角的地方)
一樣有三種屬性: miter round bevel
miter 直角(預設)
round 圓角
bevel 轉角為斜切
當然 我們更進一步 可以將邊框變成你想要的虛線
1 | <path ... stroke-dasharray="5,10,5" /> |
可以看到說 這個stroke-dasharray的方法就是
第一個數字為5px實線,緊接著10px的空白,然後又接著5px的實線,用逗號來做分隔,然後一直循環
所以它的寫法為
1 | <path ... stroke-dasharray="實線,空白,實線 ...." /> |
當然,如果你想寫更複雜的虛線,你可以在後面繼續延伸下去
在CSS裡 我們要怎麼對svg做操作呢?
我們要使用我們剛剛上面所說的一切屬性來對它做操作
它的標籤就跟你平常在寫有點不一漾
1 | <style> |
可以看到,我們遵循著svg的規範,去製作我們想要的任何效果
如果你已經會了CSS跟HTML,相信這對你來說並沒有太大的難度
今天的介紹介到這裡,我們下次見d(`・∀・)b