檢視 SVG/transform/matrix 的原始碼

[[分類:HTML]]
==矩陣基本演算規則==
<table style='border:none;'><tr>
<td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>a c<br/>c d</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>ax+by<br/>cx+dy</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td>
</tr></table>
====旋轉====
<table style='border:none;'><tr>
<td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>cosθ -sinθ<br/>sinθ cosθ</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>cosθx-sinθy<br/>sinθx+cosθy</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td>
</tr></table>
====縮放====
<table style='border:none;'><tr>
<td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>S<sub>x</sub> 0<br/>0 S<sub>y</sub></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>S<sub>x</sub>x<br/>S<sub>y</sub>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td>
</tr></table>
====x拉斜====
<table style='border:none;'><tr>
<td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>1 k<br/>0 1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x+ky<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td>
</tr></table>
====y拉斜====
<table style='border:none;'><tr>
<td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>1 0<br/>k 1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y+kx</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td>
</tr></table>
====沿經過原點的直線反射====
假設（ux, uy）為直線方向的單位向量。變換矩陣為：
<table style='border:none;'><tr>
<td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>2u<sub>x</sub><sup>2</sup>-1 2u<sub>x</sub>u<sub>y</sub><br/>2u<sub>x</sub>u<sub>y</sub> 2u<sub>y</sub><sup>2</sup>-1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>(2u<sub>x</sub><sup>2</sup>-1)x+2u<sub>x</sub>u<sub>y</sub>y<br/>2u<sub>x</sub>u<sub>y</sub>x+(2u<sub>y</sub><sup>2</sup>-1)y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td>
</tr></table>
====沿直線 y=(tanθ)x 進行反射====
<table style='border:none;'><tr>
<td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>cos2θ sin2θ<br/>sin2θ -cos2θ</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>cos2θx+sin2θy<br/>sin2θx-cos2θy</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td>
</tr></table>
====投影到一條經過原點的直線====

==SVG transform 矩陣變換==
===(○)基本===
<table style='border:none;'><tr>
<td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>a c e<br/>b d f<br/>0 0 1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<br/>y<br/>1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>ax+cy+e<br/>bx+dy+f<br/>1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td><td>=</td><td>
<table style='border:none;'>
<tr><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-left:solid 1px;'></th><th style=''>x<sup>'</sup><br/>y<sup>'</sup><br/>1</th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
</table>
</td>
</tr></table>