HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์
Moderator: mindphp
-
peterparker000
- PHP Newbie
- โพสต์: 1
- ลงทะเบียนเมื่อ: 07/04/2015 10:35 pm
โพสต์ที่ยังไม่ได้อ่าน
โดย 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 (9.4 KiB) Viewed 972 times
[/img]
-
-
- 0 ตอบกลับ
- 1280 แสดง
-
โพสต์ล่าสุด โดย abdkode
04/04/2019 2:25 pm
-
-
- 0 ตอบกลับ
- 3111 แสดง
-
โพสต์ล่าสุด โดย phennapa
16/06/2020 6:20 am
-
-
- 0 ตอบกลับ
- 2302 แสดง
-
โพสต์ล่าสุด โดย putcharaporn_tan
06/08/2015 1:36 pm
-
-
- 25 ตอบกลับ
- 5360 แสดง
-
โพสต์ล่าสุด โดย ewqolf
06/02/2023 9:15 am
-
-
- 0 ตอบกลับ
- 5182 แสดง
-
โพสต์ล่าสุด โดย watcharin
26/03/2018 4:30 pm
-
-
- 2 ตอบกลับ
- 1508 แสดง
-
โพสต์ล่าสุด โดย narin-thongseubsai
15/10/2021 2:04 pm
-
-
- 0 ตอบกลับ
- 5279 แสดง
-
โพสต์ล่าสุด โดย Codalien
06/11/2023 2:33 pm
สมาชิกกำลังดูบอร์ดนี้: Google Adsense [Bot] และบุคลทั่วไป 59