ย้ายตำแหน่งของ group ใน SVG

ใน Group ของ SVG เราใส่ attribute ชื่อ transform เข้าไปได้ มันขยาย หมุน ย้ายที่ ใส่ matrix เข้าไปคูณอะไรได้สารพัด แต่ว่าแค่ย้ายที่ก็ใช้ transform=”translate(10,20)” แบบนี้ก็จะย้ายไปทางขวา 10 ลงล่าง 20

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="21cm" height="29.7cm" viewBox="0 0 1000 1414"
     xmlns="http://www.w3.org/2000/svg" version="1.1">     

    <!-- ข้างล่าง -->
    <g transform="translate(10, 20)">
        <text x="10" y="30" font-size="20" 
            fill="blue">Test</text>
    </g>
</svg>

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s