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

出自六年制學程
跳轉到： 導覽、 搜尋
（→‎正六角框）
（→‎擬圓）
 
（未顯示同用戶所作出之25次版本）
第 12 行： 第 12 行：
 
<img src='https://upload.wikimedia.org/wikipedia/commons/8/85/HexagonalFrame.svg'/>
 
<img src='https://upload.wikimedia.org/wikipedia/commons/8/85/HexagonalFrame.svg'/>
 
<pre><polygon id='正六角框' points='0,24 14,0 (14+x),0 (14+x+14),24 (14+x),48 14,48'/></pre>
 
<pre><polygon id='正六角框' points='0,24 14,0 (14+x),0 (14+x+14),24 (14+x),48 14,48'/></pre>
−
#x為六角框上下方水平線之長度，一般取 52 。
+
#x為六角框上下方水平線之長度，一般取 52 ，此時整個圖形的寬×高為 <span style='color:brown'>80×48</span> 。
 
#第一點為六角框最左側角。
 
#第一點為六角框最左側角。
 
#左右角之角度約為 120° 。
 
#左右角之角度約為 120° 。
 
#適合放 font-size:24px 中文字 2~3 個字。
 
#適合放 font-size:24px 中文字 2~3 個字。
 +
 +
===擬圓===
 +
#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 9:11 的位置上。如下圖：
 +
#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/>
 +
#所以湊足四個圓角框的 path ，可以描寫近似圓。以下為以最左點為起點，順時針畫出的擬圓：<br/><path d='m最左點座標 c 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r -0.55r,0 -r,-0.45r -r,-r'/>
 +
#所以繪製直角轉彎或半圓時，可參考以下兩圖的原始碼：
 +
#:順時鐘轉彎：<img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/BezierCurveCockwise.svg' width='25%' height='25%'/>
 +
#:逆時鐘轉彎：<img src='https://upload.wikimedia.org/wikipedia/commons/3/35/BezierCurveCounterclockwise.svg' width='25%' height='25%'/>
 +
#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552
 +
#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/>
 +
#用n段三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式：(4/3)*tan(π/(2n))
 +
#:<img src='https://i.sstatic.net/270te.png' width='50%' height='*'/>
 +
====參考====
 +
#[https://stackoverflow.com/questions/1734745/how-to-create-circle-with-bézier-curves/1734859 How to create circle with Bézier curves?]
 +
#[https://oomake.com/question/343212 如何使用Bézier曲線創建圓？]
 +
#[https://www.jianshu.com/p/5198d8aa80c1 用三阶贝塞尔曲线拟合圆]
 +
 +
===四分之一圓之弧===
 +
<pre><path d='M 0,12 A 12,12 0 0 1 12,0'/></pre>
 +
#半徑為 12 。
 +
#和 12×12 且兩控制點(紅點)位於直角頂點與圓角端點(黑點)的連線上，位置在距直角頂點(黑點) 5.4:6.6 的三次貝茲函式圓角框，幾近重合。兩者的比較，藍線為圓角框、紅線為弧(線很細，要放大看)：
 +
#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e0/RadiusCorner2.svg' width='128' height='128'/>
  
 
===圓角框===
 
===圓角框===
 
<img src='https://upload.wikimedia.org/wikipedia/commons/7/7c/RadiusCorner3.svg'/>
 
<img src='https://upload.wikimedia.org/wikipedia/commons/7/7c/RadiusCorner3.svg'/>
 
<pre><rect id='圓角框' width='寬' height='高' rx='12' ry='12'/></pre>
 
<pre><rect id='圓角框' width='寬' height='高' rx='12' ry='12'/></pre>
−
#寬可取93，高可取35.2。
+
#寬可取93，高可取35.2，即 <span style='color:brown'>93×35.2</span> 。
 
#圓角半徑12。
 
#圓角半徑12。
 
#適合放 font-size:21px 中文字 2~4 字。
 
#適合放 font-size:21px 中文字 2~4 字。
−
或<br/>
+
或
 
<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 。
 
#圓角區： 12×12 。
−
#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 5.4:6.6 的位置上。如下圖：
 
−
#:<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>
 
−
#半徑為 12 。
 
−
#和 12×12 且兩控制點(紅點)位於直角頂點與圓角端點(黑點)的連線上，位置在距直角頂點(黑點) 5.4:6.6 的三次貝茲函式圓角框，幾近重合。兩者的比較，藍線為圓角框、紅線為弧(線很細，要放大看)：
 
−
#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e0/RadiusCorner2.svg' width='128' height='128'/>
 
−
#所以湊足四個圓角框的 path ，可以描寫近似圓。
 

2024年8月1日 (四) 22:55的最新修訂版本

六角框

<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 ，此時整個圖形的寬×高為 80×48 。
  2. 第一點為六角框最左側角。
  3. 左右角之角度約為 120° 。
  4. 適合放 font-size:24px 中文字 2~3 個字。

擬圓

  1. 每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 9:11 的位置上。如下圖：
  2. 所以湊足四個圓角框的 path ，可以描寫近似圓。以下為以最左點為起點，順時針畫出的擬圓：
    <path d='m最左點座標 c 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r -0.55r,0 -r,-0.45r -r,-r'/>
  3. 所以繪製直角轉彎或半圓時，可參考以下兩圖的原始碼：
    順時鐘轉彎：
    逆時鐘轉彎：
  4. 上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√2-1)/3 ≒ 0.552284749831 ≒ 0.552
  5. 用n段三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式：(4/3)*tan(π/(2n))

參考

  1. How to create circle with Bézier curves?
  2. 如何使用Bézier曲線創建圓？
  3. 用三阶贝塞尔曲线拟合圆

四分之一圓之弧

<path d='M 0,12 A 12,12 0 0 1 12,0'/>
  1. 半徑為 12 。
  2. 和 12×12 且兩控制點(紅點)位於直角頂點與圓角端點(黑點)的連線上，位置在距直角頂點(黑點) 5.4:6.6 的三次貝茲函式圓角框，幾近重合。兩者的比較，藍線為圓角框、紅線為弧(線很細，要放大看)：

圓角框

<rect id='圓角框' width='寬' height='高' rx='12' ry='12'/>
  1. 寬可取93，高可取35.2，即 93×35.2 。
  2. 圓角半徑12。
  3. 適合放 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'/>
  1. x為圓角以外的寬度，可取69；y為圓角以外的高度，可取11.2。
  2. 圓角區： 12×12 。
取自「http://jendo.org/wiki1231/index.php?title=SVG圖形元件&oldid=59809」