SVG圖形元件:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
圓角框
圓角框
第 18 行: 第 18 行:
 
<img src='https://upload.wikimedia.org/wikipedia/commons/d/d7/RoundedFrame.svg'/>
 
<img src='https://upload.wikimedia.org/wikipedia/commons/d/d7/RoundedFrame.svg'/>
 
<pre><path id='圓角框' d='M (12+x),(12+y+12) H 12 C 5.4,(12+y+12) 0,(12+y+6.6) 0,(12+y) V 12 C 0,5.4 5.4,0 12,0 h x c 6.6,0 12,5.4 12,12 v y c 0,6.6 -5.4,12 -12,12 z'/></pre>
 
<pre><path id='圓角框' d='M (12+x),(12+y+12) H 12 C 5.4,(12+y+12) 0,(12+y+6.6) 0,(12+y) V 12 C 0,5.4 5.4,0 12,0 h x c 6.6,0 12,5.4 12,12 v y c 0,6.6 -5.4,12 -12,12 z'/></pre>
#x=69,y=11.2
+
#x為圓角以外的寬度,可取69;y為圓角以外的高度,可取11.2。
 +
#圓角區:12×12
 +
#每個圓角都用三次貝茲曲線描寫,有兩個控制點,兩個控制點距原來的直角頂點為 5.4×5.4 ,距離邊線上的圓角起點各為 6.6 。

2018年8月21日 (二) 22:35的修訂版本

六角框

<polygon id='六角框' points='0,24 20,0 (20+x),0 (20+x+20),24 (20+x),48 20,48'/>
  1. x為六角框上下方水平線之長度,一般取 40 。
  2. 第一點為六角框最左側角。
  3. 左右角之角度約為 100° ,比正六邊形 120° 略尖。
  4. 取用時再加上顏色與框線顏色。如:
<use xlink:href='#六角框' transform='translate(0,0)' style='fill:#92F4F1;stroke:#0000FF;'/>

正六角框

<polygon id='正六角框' points='0,35 20,0 (20+x),0 (20+x+20),35 (20+x),70 20,70'/>

<polygon id='正六角框' points='0,24 14,0 (14+x),0 (14+x+14),24 (14+x),48 14,48'/>
  1. x為六角框上下方水平線之長度,一般取 52 。
  2. 第一點為六角框最左側角。
  3. 左右角之角度約為 120° 。

圓角框

<path id='圓角框' d='M (12+x),(12+y+12) H 12 C 5.4,(12+y+12) 0,(12+y+6.6) 0,(12+y) V 12 C 0,5.4 5.4,0 12,0 h x c 6.6,0 12,5.4 12,12 v y c 0,6.6 -5.4,12 -12,12 z'/>
  1. x為圓角以外的寬度,可取69;y為圓角以外的高度,可取11.2。
  2. 圓角區:12×12
  3. 每個圓角都用三次貝茲曲線描寫,有兩個控制點,兩個控制點距原來的直角頂點為 5.4×5.4 ,距離邊線上的圓角起點各為 6.6 。