รบกวนผู้รู้ช่วยแนะนำเรื่อง svg-animation ทีครับ เช่น การใช้โค้ด การกำหนด style ให้สามารถเคลื่อนไหวในรูปแบบต่างๆทีครับ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

peterparker000
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 07/04/2015 10:35 pm

รบกวนผู้รู้ช่วยแนะนำเรื่อง svg-animation ทีครับ เช่น การใช้โค้ด การกำหนด style ให้สามารถเคลื่อนไหวในรูปแบบต่างๆทีครับ

โพสต์ที่ยังไม่ได้อ่าน โดย peterparker000 »

ตัวอย่าง svg
จากโค้ด ผลรันจะออกมาเป็นรูปเคลื่อนไหว สี่เหลี่ยมจตุรัสหมุน
ผมเข้าใจว่าการกำหนดการเคลื่อนไหวต่างๆ จะกำหนดตรง stype ดังด้านล่าง

<style>
rect {
-moz-transform-origin: 75px 75px;
transform-origin: 50% 50%;
}
</style>


เราจะรู้ได้ยังไงครับว่าเราต้องใช้คำสั่งใด ถ้าเราจะให้มันเคลื่อนไหวได้ในแบบอื่นๆ

โค้ด: เลือกทั้งหมด

<svg width="500" height="150">
<style>
rect {
-moz-transform-origin: 75px 75px;
transform-origin: 50% 50%;
}
</style>
<rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" />

<animateTransform 
xlink:href="#deepPink-rectangle"
attributeName="transform" 
attributeType="XML"
type="rotate"
from="0 75 75"
to="360 75 75" 
dur="2s"
begin="0s; 5s; 9s; 17s;"
end="2s; 8s; 15s; 25s;"
fill="freeze" 
restart="whenNotActive"
/>

</svg>
Output
[img]
11.jpg
11.jpg (9.4 KiB) Viewed 971 times
[/img]
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 82