http://jendo.synology.me/wiki1231/index.php?action=history&feed=atom&title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6
SVG圖形元件 - 修訂歷史
2026-04-10T01:42:44Z
本 Wiki 上此頁面的修訂歷史
MediaWiki 1.35.14
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=59809&oldid=prev
丁志仁：/* 擬圓 */
2024-08-01T14:55:31Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2024年8月1日 (四) 14:55 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22" >第22行：</td>
<td colspan="2" class="diff-lineno">第22行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 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'/> </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 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'/> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以繪製直角轉彎或半圓時，可參考以下兩圖的原始碼：</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以繪製直角轉彎或半圓時，可參考以下兩圖的原始碼：</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#:順時鐘轉彎：<img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/BezierCurveCockwise.svg' width='25%' height='<del class="diffchange diffchange-inline">*</del>'/></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#:順時鐘轉彎：<img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/BezierCurveCockwise.svg' width='25%' height='<ins class="diffchange diffchange-inline">25%'/></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">#:逆時鐘轉彎：<img src='https://upload.wikimedia.org/wikipedia/commons/3/35/BezierCurveCounterclockwise.svg' width='25%' height='25%</ins>'/></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></div></td></tr>
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=59808&oldid=prev
丁志仁：/* 擬圓 */
2024-08-01T14:53:22Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2024年8月1日 (四) 14:53 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22" >第22行：</td>
<td colspan="2" class="diff-lineno">第22行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 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'/> </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 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'/> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以繪製直角轉彎或半圓時，可參考以下兩圖的原始碼：</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以繪製直角轉彎或半圓時，可參考以下兩圖的原始碼：</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#:順時鐘轉彎：<img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/BezierCurveCockwise.svg' width='<del class="diffchange diffchange-inline">50</del>%' height='*'/></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#:順時鐘轉彎：<img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/BezierCurveCockwise.svg' width='<ins class="diffchange diffchange-inline">25</ins>%' height='*'/></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></div></td></tr>
<!-- diff cache key wiki1231:diff::1.12:old-59807:rev-59808 -->
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=59807&oldid=prev
丁志仁：/* 擬圓 */
2024-08-01T14:52:51Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2024年8月1日 (四) 14:52 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l21" >第21行：</td>
<td colspan="2" class="diff-lineno">第21行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 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'/> </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 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'/> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">#所以繪製直角轉彎或半圓時，可參考以下兩圖的原始碼：</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">#:順時鐘轉彎：<img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/BezierCurveCockwise.svg' width='50%' height='*'/></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></div></td></tr>
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=59806&oldid=prev
丁志仁：/* 擬圓 */
2024-08-01T14:45:51Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2024年8月1日 (四) 14:45 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20" >第20行：</td>
<td colspan="2" class="diff-lineno">第20行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 9:11 的位置上。如下圖：</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 9:11 的位置上。如下圖：</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path <del class="diffchange diffchange-inline">，可以描寫近似圓。以下為以底點為起點，順時針畫出的擬圓：</del><br/><path d='<del class="diffchange diffchange-inline">m底點座標 </del>c <del class="diffchange diffchange-inline">-0.55r,0 -r,-0.45r -r,-r </del>0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r'/> </div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path <ins class="diffchange diffchange-inline">，可以描寫近似圓。以下為以最左點為起點，順時針畫出的擬圓：</ins><br/><path d='<ins class="diffchange diffchange-inline">m最左點座標 </ins>c 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,<ins class="diffchange diffchange-inline">r -0.55r,0 -r,-0.45r -r,-</ins>r'/> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></div></td></tr>
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=59805&oldid=prev
丁志仁：/* 擬圓 */
2024-08-01T12:20:46Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2024年8月1日 (四) 12:20 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22" >第22行：</td>
<td colspan="2" class="diff-lineno">第22行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path ，可以描寫近似圓。以下為以底點為起點，順時針畫出的擬圓：<br/><path d='m底點座標 c -0.55r,0 -r,-0.45r -r,-r 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r'/> </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path ，可以描寫近似圓。以下為以底點為起點，順時針畫出的擬圓：<br/><path d='m底點座標 c -0.55r,0 -r,-0.45r -r,-r 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r'/> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">#:<img src='https://i.sstatic.net/aEsuA.png' width='50%' height='*'/></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">#用n段三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式：(4/3)*tan(π/(2n))</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/270te.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.sstatic.net/270te.png' width='50%' height='*'/></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">#用n段三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式：(4/3)*tan(π/(2n))</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">#:<img src='https://i.stack.imgur.com/270te.png' width='50%' height='*'/></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====參考====</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====參考====</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#[https://stackoverflow.com/questions/1734745/how-to-create-circle-with-bézier-curves/1734859 How to create circle with Bézier curves?]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#[https://stackoverflow.com/questions/1734745/how-to-create-circle-with-bézier-curves/1734859 How to create circle with Bézier curves?]</div></td></tr>
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=59804&oldid=prev
丁志仁：/* 擬圓 */
2024-08-01T12:18:21Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2024年8月1日 (四) 12:18 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22" >第22行：</td>
<td colspan="2" class="diff-lineno">第22行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path ，可以描寫近似圓。以下為以底點為起點，順時針畫出的擬圓：<br/><path d='m底點座標 c -0.55r,0 -r,-0.45r -r,-r 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r'/> </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path ，可以描寫近似圓。以下為以底點為起點，順時針畫出的擬圓：<br/><path d='m底點座標 c -0.55r,0 -r,-0.45r -r,-r 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r'/> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.<del class="diffchange diffchange-inline">stack</del>.<del class="diffchange diffchange-inline">imgur.com</del>/<del class="diffchange diffchange-inline">aEsuA</del>.png' width='50%' height='*'/></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.<ins class="diffchange diffchange-inline">sstatic</ins>.<ins class="diffchange diffchange-inline">net</ins>/<ins class="diffchange diffchange-inline">270te</ins>.png' width='50%' height='*'/></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#用n段三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式：(4/3)*tan(π/(2n))</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#用n段三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式：(4/3)*tan(π/(2n))</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.stack.imgur.com/270te.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.stack.imgur.com/270te.png' width='50%' height='*'/></div></td></tr>
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=57003&oldid=prev
丁志仁 於 2022年4月9日 (六) 13:16
2022-04-09T13:16:33Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2022年4月9日 (六) 13:16 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l29" >第29行：</td>
<td colspan="2" class="diff-lineno">第29行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#[https://oomake.com/question/343212 如何使用Bézier曲線創建圓？]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#[https://oomake.com/question/343212 如何使用Bézier曲線創建圓？]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#[https://www.jianshu.com/p/5198d8aa80c1 用三阶贝塞尔曲线拟合圆]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#[https://www.jianshu.com/p/5198d8aa80c1 用三阶贝塞尔曲线拟合圆]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">===四分之一圓之弧===</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><pre><path d='M 0,12 A 12,12 0 0 1 12,0'/></pre></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">#半徑為 12 。</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">#和 12×12 且兩控制點(紅點)位於直角頂點與圓角端點(黑點)的連線上，位置在距直角頂點(黑點) 5.4:6.6 的三次貝茲函式圓角框，幾近重合。兩者的比較，藍線為圓角框、紅線為弧(線很細，要放大看)：</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e0/RadiusCorner2.svg' width='128' height='128'/></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===圓角框===</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===圓角框===</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l41" >第41行：</td>
<td colspan="2" class="diff-lineno">第47行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#x為圓角以外的寬度，可取69；y為圓角以外的高度，可取11.2。</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#x為圓角以外的寬度，可取69；y為圓角以外的高度，可取11.2。</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#圓角區： 12×12 。</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#圓角區： 12×12 。</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">===四分之一圓之弧===</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><pre><path d='M 0,12 A 12,12 0 0 1 12,0'/></pre></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">#半徑為 12 。</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">#和 12×12 且兩控制點(紅點)位於直角頂點與圓角端點(黑點)的連線上，位置在距直角頂點(黑點) 5.4:6.6 的三次貝茲函式圓角框，幾近重合。兩者的比較，藍線為圓角框、紅線為弧(線很細，要放大看)：</del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e0/RadiusCorner2.svg' width='128' height='128'/></del></div></td><td colspan="2"> </td></tr>
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=57002&oldid=prev
丁志仁：/* 擬圓 */
2022-04-09T11:28:25Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2022年4月9日 (六) 11:28 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20" >第20行：</td>
<td colspan="2" class="diff-lineno">第20行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 9:11 的位置上。如下圖：</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 9:11 的位置上。如下圖：</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path <del class="diffchange diffchange-inline">，可以描寫近似圓。</del><br/><path d='m底點座標 c -0.55r,0 -r,-0.45r -r,-r 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r'/> </div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path <ins class="diffchange diffchange-inline">，可以描寫近似圓。以下為以底點為起點，順時針畫出的擬圓：</ins><br/><path d='m底點座標 c -0.55r,0 -r,-0.45r -r,-r 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r'/> </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.stack.imgur.com/aEsuA.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.stack.imgur.com/aEsuA.png' width='50%' height='*'/></div></td></tr>
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=57001&oldid=prev
丁志仁：/* 擬圓 */
2022-04-09T11:27:13Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2022年4月9日 (六) 11:27 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l20" >第20行：</td>
<td colspan="2" class="diff-lineno">第20行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 9:11 的位置上。如下圖：</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#每個圓角都用三次貝茲曲線描寫，有兩個控制點(紅點)，位於直角頂點與圓角端點(黑點)的連線上，距直角頂點(黑點) 9:11 的位置上。如下圖：</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path ，可以描寫近似圓。</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path ，可以描寫近似圓。<ins class="diffchange diffchange-inline"><br/><path d='m底點座標 c -0.55r,0 -r,-0.45r -r,-r 0,-0.55r 0.45r,-r r,-r 0.55r,0 r,0.45r r,r 0,0.55r -0.45r,r -r,r'/> </ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = 20:11 = 1:0.55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： (4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.stack.imgur.com/aEsuA.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.stack.imgur.com/aEsuA.png' width='50%' height='*'/></div></td></tr>
</table>
丁志仁
http://jendo.synology.me/wiki1231/index.php?title=SVG%E5%9C%96%E5%BD%A2%E5%85%83%E4%BB%B6&diff=57000&oldid=prev
丁志仁：/* 擬圓 */
2022-04-09T11:15:45Z
<p><span dir="auto"><span class="autocomment">擬圓</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="zh-Hant-TW">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上個修訂</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">於 2022年4月9日 (六) 11:15 的修訂</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l21" >第21行：</td>
<td colspan="2" class="diff-lineno">第21行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://upload.wikimedia.org/wikipedia/commons/e/e3/RadiusCorner.svg'/></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path ，可以描寫近似圓。</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#所以湊足四個圓角框的 path ，可以描寫近似圓。</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離=<del class="diffchange diffchange-inline">12</del>:<del class="diffchange diffchange-inline">6.6</del>=1:0.<del class="diffchange diffchange-inline">55，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： </del>(4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#上圖圓半徑:圓角端點至控制點的距離 = <ins class="diffchange diffchange-inline">20</ins>:<ins class="diffchange diffchange-inline">11 </ins>= 1:0.<ins class="diffchange diffchange-inline">55 ，用四個圓角三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式： </ins>(4/3)*tan(π/8) = 4*(√<span style='text-decoration:overline'>2</span>-1)/3 ≒ 0.552284749831 ≒ 0.552</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.stack.imgur.com/aEsuA.png' width='50%' height='*'/></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#:<img src='https://i.stack.imgur.com/aEsuA.png' width='50%' height='*'/></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#用n段三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式：(4/3)*tan(π/(2n))</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#用n段三次貝茲曲線模擬近似圓時，端點距控制點之距離有公式：(4/3)*tan(π/(2n))</div></td></tr>
</table>
丁志仁