SVG邊線邊框屬性
-
SVG stroke 屬性
這個
stroke
屬性用來定義圖形、文本等的邊線顏色:下面的圖形使用的SVG代碼:
<svg height="100" width="400"> <g fill="none"> <path stroke="red" d="M0 10 l300 0" /> <path stroke="green" d="M0 40 L300 40" /> <path stroke="blue" d="M0 70 L300 70" /> </g> </svg>
-
SVG stroke-width 屬性
stroke-width
屬性用來定義圖形或文字邊線的寬度:下面的圖形使用的SVG代碼:
<svg height="100" width="400"> <g fill="none" stroke="red"> <path stroke-width="2" d="M0 10 l300 0" /> <path stroke-width="4" d="M0 40 L300 40" /> <path stroke-width="6" d="M0 70 L300 70" /> </g> </svg>
-
SVG stroke-linecap 屬性
stroke-linecap
屬性用來定義開放式路徑的端點的樣子:下面的圖形使用的SVG代碼:
<svg height="100" width="400"> <g fill="none" stroke="red" stroke-width="16"> <path stroke-linecap="butt" d="M0 10 l300 0" /> <path stroke-linecap="round" d="M0 40 L300 40" /> <path stroke-linecap="square" d="M0 70 L300 70" /> </g> </svg>
-
SVG stroke-dasharray 屬性
stroke-dasharray
屬性用來創建虛線:下面的圖形使用的SVG代碼:
<svg height="100" width="400"> <g fill="none" stroke="red" stroke-width="6"> <path stroke-dasharray="6,6" d="M0 10 l300 0" /> <path stroke-dasharray="20,6" d="M0 40 L300 40" /> <path stroke-dasharray="20,6,6,6,6,20" d="M0 70 L300 70" /> </g> </svg>
SVG transform
-
transform 描述 translate(x, y)
平移: 將用戶座標系統的座標原點移動到(x, y) scale(xFactor, yFactor)
縮放: 將用戶座標系統的xy軸單位長度分別乘(xFactor, yFactor)倍 scale(factor)
縮放: 同 scale(factor, factor)
rotate(angle, centerX, centerY)
旋轉: 將用戶座標系統以(centerX, centerY)爲旋轉中心順時針旋轉 angle 度 rotate(angle)
旋轉: 同 rotate(angle, 0, 0)
skewX(angle)
傾斜: 根據 angle 傾斜所有 x 軸座標, 視覺上會看到 y 軸傾斜... skewY(angle)
傾斜: 根據 angle 傾斜所有 y 軸座標, 視覺上會看到 x 軸傾斜... matrix(a b c d e f)
矩陣變換: 將座標系統進行矩陣變換, 詳細內容請參考後續文章 <svg width="500" height="300"> <path d="M 20 20 v 100 h 100 v -100 z" fill="none" stroke="red" stroke-width="3" /> </svg>
<svg width="500" height="300"> <path d="M 20 20 v 100 h 100 v -100 z" fill="none" stroke="red" stroke-width="3" transform="rotate(45 40 90)"/> </svg>
svg的viewBox和preserveAspectRatio屬性 -
SVG viewBox 屬性
SVG通過有限區域展現在屏幕上,這個區域叫做viewport
。SVG中超出視窗邊界的區域會被裁切並且隱藏。
<svg width="400" height="300" viewBox="0 0 200 150" style="border:1px solid #cd0000;">
<image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
- 它聲明瞭一個特定的區域,畫布橫跨左上角的點(0,0)到點(200,150)。
- SVG圖像被這個區域裁切。
- 區域被拉伸(類似縮放效果)來充滿整個視窗。
- 用戶座標系被映射到視窗座標系-在這種情況下-一個用戶單位等於兩個視窗單位。
<svg width="400" height="300" viewBox="20 20 200 150" style="border:1px solid #cd0000;">
<image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
添加viewBox="20 20 200 150"的效果如下。圖形被裁切然後拉伸來充滿整個視窗區域。4:3
.
顯然,實際應用viewBox
不可能一直跟viewport
穿同一條開襠褲。此時,就需要preserveAspectRatio
出馬了,此屬性也是應用在<svg>
元素上,且作用的對象都是viewBox。preserveAspectRatio
屬性讓你可以在保持寬高比的情況下強制統一viewBox
的縮放比,並且如果不想用默認居中你可以聲明viewBox
在視窗中的位置。它在任何建立新viewport的元素上都有效(我們會在這個系列的下一部分討論這個問題)。
defer
聲明是可選的,並且只有當你在<image>
上添加preserveAspectRatio
才被用到。用在任何其他元素上時它都會被忽略。<images>
本身不在這篇文章的討論範圍,我們暫時跳過defer
這個選項。
align
參數聲明是否強制統一放縮,如果是,對齊方法會在viewBox
的寬高比不符合viewport的寬高比的情況下生效。
如果align
值設爲none
,例如:
preserveAspectRatio = "none"
圖形不在保持寬高比而會縮放來適應視窗,像我們在上面兩個例子中看到的那樣。
其他所有preserveAspectRatio
值都在保持viewBox的寬高比的情況下強制拉伸,並且指定在視窗內如何對齊viewBox。我們會簡短介紹align
的值。
最後一個屬性,meetOrSlice
也是可選的,默認值爲meet
。這個屬性聲明整個viewBox
在視窗中是否可見。如果是,它和align
參數通過一個或多個空格分隔。例如:
preserveAspectRatio = "xMidYMid slice"
preserveAspectRatio
屬性的值爲空格分隔的兩個值組合而成。例如,上面的xMidYMid
和meet
.
第1個值表示,viewBox如何與SVG viewport對齊;第2個值表示,如何維持高寬比(如果有)。
其中,第1個值又是由兩部分組成的。前半部分表示x
方向對齊,後半部分表示y
方向對齊。家族成員如下:
值含義
xMin | viewport和viewBox左邊對齊 |
xMid | viewport和viewBox x軸中心對齊 |
xMax | viewport和viewBox右邊對齊 |
YMin | viewport和viewBox上邊緣對齊。注意Y是大寫。 |
YMid | viewport和viewBox y軸中心點對齊。注意Y是大寫。 |
YMax | viewport和viewBox下邊緣對齊。注意Y是大寫。 |
preserveAspectRatio
屬性第2部分的值支持下面3個:
值含義
meet | 保持縱橫比縮放viewBox適應viewport |
slice | 保持縱橫比同時比例小的方向放大填滿viewport |
none | 扭曲縱橫比以充分適應viewport |
<svg width="400" height="300" viewBox="0 0 100 100" style="border:1px solid #cd0000;">
<image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
<svg width="400" height="300" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin slice" style="border:1px solid #cd0000;">
<image xlink:href="img/timg.jpg" x="0" y="0" height="50px" width="80px"/>
</svg>
"xMidYmid
meet"
效果。表現原理爲:SVG寬400
,
高200
,viewBox寬200
,
高200
. x
橫軸比例是2
, y
縱軸比例是1
.meet
的作用是讓viewBox等比例的同時,完全在SVG的viewport中顯示。這裏,最小比例是縱向的1
,所以,實際上viewBox並沒有任何的縮放。meet
還是slice
,你是不可能在一種狀態下同時看到x
, y
方向上的位移的。因爲總會有一個方向是充滿viewport的。