SVG skriptlash
SVG + JavaScript
SVG’dan JavaScript bilan birgalikda SVG elementlarini o‘zgartirish va animatsiya qilish uchun foydalanish mumkin.
SVG oddiy skript
Ushbu misolda radiusi 25 ga teng qizil aylana yaratamiz. Radiusni 50 ga o‘zgartirish uchun tugmani bosing:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="50" cy="50" r="25" style="fill:red;" />
</svg>
<input type="button" value="Change Radius" onclick="changeRadius()" />
<script>
function changeRadius() {
document.getElementById("circle1").setAttribute("r", "50");
}
</script>
O‘zingiz sinab ko‘ring »
Kod izohi:
<circle>elementigaidatributini qo‘shing<script>teglari ichida skript yaratinggetElementById()funksiyasi yordamida SVG elementiga havola olingsetAttribute()funksiyasi yordamidaratributini o‘zgartiring- Bosilganda JavaScript kodini ishga tushirish uchun
<input type="button">elementini qo‘shing
SVG: CSS’ni o‘zgartirish
Ushbu misolda qizil aylana yaratamiz. To‘ldirish rangini yashilga o‘zgartirish uchun tugmani bosing:
SVG kodi quyidagicha:
Misol
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle2" cx="50" cy="50" r="25" style="fill:red;" />
Sorry, your browser does not support inline SVG.
</svg>
<input type="button" value="Change Style" onclick="changeStyle()" />
<script>
function changeStyle() {
document.getElementById("circle2").style.fill="green";
}
</script>
O‘zingiz sinab ko‘ring »
Kod izohi:
<circle>elementigaidatributini qo‘shing<script>teglari ichida skript yaratinggetElementById()funksiyasi yordamida SVG elementiga havola olingstyle.fillyordamida yangi to‘ldirish rangini o‘rnating- Bosilganda JavaScript kodini ishga tushirish uchun
<input type="button">elementini qo‘shing
SVG: atribut qiymatlari va CSS’ni o‘zgartirish
Ushbu misolda qizil aylana yaratamiz. Radiusni, x pozitsiyani, to‘ldirish rangini o‘zgartirish va kontur rangini qo‘shish uchun tugmani bosing:
SVG kodi quyidagicha:
Misol
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
<circle id="circle3" cx="50" cy="60" r="25" style="fill:red;" />
</svg>
<input type="button" value="Change Circle" onclick="changeMe()" />
<script>
function changeMe() {
var c = document.getElementById("circle3");
c.setAttribute("r", "50");
c.setAttribute("cx", "150");
c.style.fill="green";
c.style.stroke="red";
}
</script>
O‘zingiz sinab ko‘ring »
Animatsiya uchun SVG skripti
Ushbu misolda qizil aylana yaratamiz. Animatsiyani boshlash va to‘xtatish uchun ikkita tugmani bosing:
SVG kodi quyidagicha:
Misol
<svg width="600" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle4" cx="50" cy="50" r="50" style="fill:red;" />
</svg>
<script>
var t = null;
function start() {
if(t == null) {
t = setInterval(animate, 20);
}
}
function stop() {
if(t != null) {
clearInterval(t);
t = null;
}
}
function animate() {
var circle = document.getElementById("circle4");
var cx = circle.getAttribute("cx");
var newCX = 2 + parseInt(cx);
if(newCX > 600) {
newCX = 50;
}
circle.setAttribute("cx", newCX);
}
</script>
<br/>
<input type="button" value="Start" onclick="start()" />
<input type="button" value="Stop" onclick="stop()" />
O‘zingiz sinab ko‘ring »
Kod izohi:
start()vastop()funksiyalari animatsiyani boshlaydi va to‘xtatadi- Animatsiya
setInterval()funksiyasi yordamida har 20 millisekunddaanimate()funksiyasini chaqiradigan taymer (t) o‘rnatish orqali boshlanadi - Animatsiya t taymerini tozalash orqali to‘xtatiladi
- Animatsiya
animate()funksiyasi ichida bajariladi getElementById()funksiyasi yordamida<circle>elementiga havola olinggetAttribute()funksiyasi yordamidacxatributining qiymatini olingparseInt()yordamidacxatributining qiymatini songa aylantiring. So‘ngracxqiymatiga 2 ni qo‘shingnewCXqiymati 600 dan (SVG "oynasi"ning kengligi) katta ekanini tekshiring va shunday bo‘lsa, uni 50 ga (asl boshlang‘ich pozitsiya) qaytaringsetAttribute()funksiyasi yordamidanewCXqiymatini<circle>elementiningcxatributiga yozing. Bu aylanani yangi cx pozitsiyasiga ko‘chiradi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!