SVG圖形元件：修訂版本之間的差異
出自六年制學程
（→圓角框） |
（→圓角框） |
||
| 第 16 行： | 第 16 行： | ||
#左右角之角度約為 120° 。 | #左右角之角度約為 120° 。 | ||
===圓角框=== | ===圓角框=== | ||
| + | <pre><rect id='圓角框' width='寬' height='高' rx='12' ry='12'/></pre> | ||
| + | #寬可取93，高可取35.2。 | ||
| + | #適合放 font-size:21px 中文字 2~4 字。 | ||
| + | 或 | ||
<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> | ||
| 第 22 行： | 第 26 行： | ||
#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 5.4:6.6 的位置上。如下圖： | #每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 5.4:6.6 的位置上。如下圖： | ||
#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/> | #:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/> | ||
| + | |||
===四分之一圓之弧=== | ===四分之一圓之弧=== | ||
<pre><path d='M 0,12 A 12,12 0 0 1 12,0'/></pre> | <pre><path d='M 0,12 A 12,12 0 0 1 12,0'/></pre> | ||
2018年8月22日 (三) 10:07的修訂版本
六角框
<polygon id='六角框' points='0,24 20,0 (20+x),0 (20+x+20),24 (20+x),48 20,48'/>
- x為六角框上下方水平線之長度，一般取 40 。
- 第一點為六角框最左側角。
- 左右角之角度約為 100° ，比正六邊形 120° 略尖。
- 取用時再加上顏色與框線顏色。如：
<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'/>
- x為六角框上下方水平線之長度，一般取 52 。
- 第一點為六角框最左側角。
- 左右角之角度約為 120° 。
圓角框
<rect id='圓角框' width='寬' height='高' rx='12' ry='12'/>
- 寬可取93，高可取35.2。
- 適合放 font-size:21px 中文字 2~4 字。
或
<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'/>
- x為圓角以外的寬度，可取69；y為圓角以外的高度，可取11.2。
- 圓角區： 12×12 。
- 每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 5.4:6.6 的位置上。如下圖：
四分之一圓之弧
<path d='M 0,12 A 12,12 0 0 1 12,0'/>
- 半徑為 12 。
- 和 12×12 且兩控制點(紅點)位於直角頂點與圓角端點(黑點)的連線上，位置在距直角頂點(黑點) 5.4:6.6 的三次貝茲函式圓角框，幾近重合。兩者的比較，藍線為圓角框、紅線為弧(線很細，要放大看)：
- 所以湊足四個圓角框的 path ，可以描寫近似圓。
