iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
1

SVG-Tag

今天來到了鐵人第17天,來介紹一下SVG的各個形狀tag吧!
首先先介紹svg基本tag~

<svg>

一個SVG元素會包括開啟標籤<svg>和結束標籤</svg>,有時候直接把繪圖軟體匯出後,用文件檔開啟,會看到以下屬性在svg的根標籤上:

  • widthheight:定義此SVG長寬
  • version:定義所使用SVG版本
  • xmlns:定義SVG命名空間
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"></svg>

<g>

在昨天有提到<g>就是 Sketch中"群組"Illustrator"同一圖層" 的概念(看看昨天文章)

<svg>
<g id="圖層_1">
	<rect id="XMLID_1_" x="148.2" y="113.3" class="st0" width="192.9" height="192.9"/>
	<circle id="XMLID_2_" class="st1" cx="269.4" cy="251.7" r="90.9"/>
</g>
<g id="圖層_2">
	<polygon id="XMLID_3_" class="st2" points="316.9,144.6 289.1,132.2 263.1,148.1 266.3,117.8 243.1,97.9 273,91.6 284.7,63.5 
		299.9,89.9 330.3,92.3 309.9,115 	"/>
</g>
</svg>

SVG-形狀

矩形-----<rect>

  • x,y為矩形左上角位置,單位預設為px([補充]:座標定位-SVG|MDN)
  • width,height為矩形長寬,單位預設px
  • fill為矩形填色
  • stroke為邊框填色
  • stroke-width為邊框寬度,單位預設px
<svg> 
 <rect x="10" y="10" width="100" height="100"
       fill="#3D619B" stroke="#4A90E2" stroke-width="5" />
</svg>

https://ithelp.ithome.com.tw/upload/images/20181101/20111500VM9XXQbhhB.png
----->圓角矩形,多了rx,ry屬性設定圓角半徑

<svg> 
 <rect x="10" y="10" rx="10" ry="10" width="100" height="100"
       fill="#3D619B" stroke="#4A90E2" stroke-width="5" />
 </svg>

圓形-----<circle>

多了兩個屬性:

  • cx,cy為圓心位置,單位預設px,如忽略沒寫,會被預設為(0,0)
  • r為半徑,單位預設px
<svg > 
    <circle cx="80" cy="80" r="60"
            stroke="#4A90E2" stroke-width="5" fill="#3D619B"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181101/20111500yMlV9Zjt00.png

橢圓形-----<ellipse>

多了一個屬性:

  • rx,ry為x方向半徑和y方向半徑,單位預設px
<svg > 
    <ellipse cx="80" cy="80" rx="70" ry="50" 
             stroke="#4A90E2" stroke-width="5" fill="#3D619B"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181101/20111500uLHquv9uRv.png

線-----<line>

多了一組x,y,來控制line的結束位置

<svg > 
    <line x1="10" y1="10" x2="100" y2="100" stroke="#4A90E2" stroke-width="5" />
</svg>

https://ithelp.ithome.com.tw/upload/images/20181101/20111500GVdYIQru28.png

多邊形-----<polygon>

多了point屬性:

  • points為多邊形角的位置x,y,單位預設px,三角形就三個points,五邊形就五個,以此類推
<svg > 
    <polygon x="0" y="0" stroke="#4A90E2" stroke-width="5" fill="#3D619B" 
             points="169,47 229,137 109,137"/>
</svg>

https://ithelp.ithome.com.tw/upload/images/20181101/20111500StmwPGKC43.png

折線-----<polyline>

折線和多邊形很像,只是設置了點後,<polyline>並不會圍成一個形狀

<svg>
<polyline points="10,10 100,100 200,10 210,100" 
          stroke="#4A90E2" stroke-width="5" fill="white" />
</svg>

https://ithelp.ithome.com.tw/upload/images/20181101/20111500mhfepGxSIA.png

~SVG龜速學習中,如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]SVG-W3C
[2]SVG-MDN
[3]https://www.oxxostudio.tw/articles/201406/svg-03-basic-shapes.html
[4]http://www.w3school.com.cn/svg/svg_rect.asp
[5]http://tutorials.jenkov.com/svg/g-element.html


上一篇
SVG-layer
下一篇
SVG-path(一)概念
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言