You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
747 B
HTML
34 lines
747 B
HTML
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
|
||
|
|
<head>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<svg width=300 height=300>">
|
||
|
|
<!-- Demo for text and defalut values for x,y -->
|
||
|
|
<text x="50" y="20">Translate Demo</text>
|
||
|
|
<rect width="40" height="40" fill="pink" />
|
||
|
|
|
||
|
|
<!-- No translation -->
|
||
|
|
<rect x="50" y="50" width="40" height="40" fill="green" />
|
||
|
|
|
||
|
|
<!-- Horizontal translation -->
|
||
|
|
<rect x="50" y="50" width="40" height="40" fill="blue"
|
||
|
|
transform="translate(50)" />
|
||
|
|
|
||
|
|
<!-- Vertical translation -->
|
||
|
|
<rect x="50" y="50" width="40" height="40" fill="red"
|
||
|
|
transform="translate(0 50)" />
|
||
|
|
|
||
|
|
<!-- Both horizontal and vertical translation -->
|
||
|
|
<rect x="50" y="50" width="40" height="40" fill="yellow"
|
||
|
|
transform="translate(50,50)" />
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|