「SVG/transform/matrix」修訂間的差異

出自六年制學程
跳至導覽 跳至搜尋
第16行: 第16行:
 
</td><td>=</td><td>
 
</td><td>=</td><td>
 
<table style='border:none;'>
 
<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/>yx<sup>'</sup></th><th style='width:2px;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;'></th></tr>
+
<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>
 
</table>
 
</td>
 
</td>
 
</tr></table>
 
</tr></table>

於 2017年12月9日 (六) 13:55 的修訂

矩陣基本演算規則

a b
c d
x
y
=
ax+by
cx+dy
=
x'
y'

SVG transform 矩陣變換

(○)基本

a c e
b d f
0 0 1
x
y
1
=
ax+cy+e
bx+dy+f
1
=
x'
y'
1