SVG學習總結

SVG · 發表 2019-05-05 12:56:30

摘要： SVG(Scalable Vector Graphics) 可縮放向量圖是一種使用 XML 描述 2D 圖形的語言。 SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪製的圖形...

SVG(Scalable Vector Graphics) 可縮放向量圖 是一種使用 XML 描述 2D 圖形的語言。

SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪製的圖形均被視為物件。如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

svg的一些優勢：

SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 影象比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 影象可在任何的解析度下被高質量地列印
SVG 可在影象質量不下降的情況下被放大
SVG 影象中的文字是可選的，同時也是可搜尋的（很適合製作地圖）
SVG 可以與 Java 技術一起執行
SVG 是開放的標準
SVG 檔案是純粹的 XML

svg可通過 `<object>,<embed>,<iframe>` 標籤引入html中。

圖形繪製中的一些tips

顯示層次由標籤自上至下順序指定
stroke-dasharray: 虛線定義顯示隱藏畫素數迴圈
rect的弧度由rx,ry指定如果存在一個值未定義則默和已存在的值相等。
X1,y1 x2,y2作為點位置的書寫方式

SVG通過視窗、視野控制svg的顯示

視窗由svg的width,height控制視野有viewBox屬性控制
視窗是html引入svg的顯示大小。視野是svg上會被顯示的的區域。先通過視野獲取顯示內容，再縮放適配到視窗。
預設視窗的大小是300px、150px
viewBox 注意 B 大寫。否則無效
如果不指定視窗尺寸但指定viewBox視野則預設填充
視窗，視野都指定並且成比例。則經過縮放直接適配。如果二者不等比例。則需要preserveAspectRatio屬性來確定填充策略。
preserveAspectRatio

第二個引數	描述
meet（預設）	保持長寬比,整個viewBox在viewport中可見；圖形往往縮小
slice	保持長寬比,viewBox覆蓋viewport的全部區域；圖形往往放大
none	不在保持長寬比，直接拉伸縮放，但如果第一個引數存在則無效

當第二個引數選擇meet/slice時就會出現某個方向未被填滿，或者溢位的情況需要設定x,y方向的對齊策略

第一個引數	描述
xMin/xMid/xMax	x方向左對齊，居中對齊，右對齊
YMin/YMid/YMax（ Y 大寫）	y方向左對齊，居中對齊，右對齊

兩行組合在一起x在前，y在後組成第一個引數

黑色矩形為視野，虛線矩形為視窗

漸變

線性漸變

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
複製程式碼

漸變方式獨立定義
x1,y1,x2,y2描述漸變方向
如果offset如果出現逆序例如：50% green,30% red 30%會變為50% 圓滑過度的綠色的另一半變成紅色。並且有明顯的紅綠分隔線。