Tập lệnh SVG
SVG + JavaScript
SVG có thể được sử dụng cùng với JavaScript để sửa đổi và tạo hiệu ứng cho các phần tử SVG.
Tập lệnh đơn giản SVG
Trong ví dụ này, chúng ta tạo một vòng tròn màu đỏ có bán kính 25. Nhấp vào nút để thay đổi bán kính thành 50:
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://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>
Hãy tự mình thử »Giải thích mã:
- Thêm thuộc tính
id
vào phần tử<circle>
- Tạo tập lệnh trong thẻ
<script>
- Nhận tham chiếu đến phần tử SVG bằng hàm
getElementById()
- Thay đổi thuộc tính
r
bằng hàmsetAttribute()
- Thêm phần tử
<input type="button">
để chạy JavaScript khi được nhấp vào
SVG Thay đổi CSS
Trong ví dụ này, chúng ta tạo một vòng tròn màu đỏ. Bấm vào nút để thay đổi màu tô thành màu xanh lá cây:
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://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>
Hãy tự mình thử »Giải thích mã:
- Thêm thuộc tính
id
vào phần tử<circle>
- Tạo tập lệnh trong thẻ
<script>
- Nhận tham chiếu đến phần tử SVG bằng hàm
getElementById()
- Đặt màu tô mới với
style.fill
- Thêm phần tử
<input type="button">
để chạy JavaScript khi được nhấp vào
SVG Thay đổi giá trị thuộc tính và CSS
Trong ví dụ này, chúng ta tạo một vòng tròn màu đỏ. Nhấp vào nút để thay đổi bán kính, vị trí x, tô màu và thêm màu nét:
Đây là mã SVG:
Ví dụ
<svg width="200" height="120" xmlns="https://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>
Hãy tự mình thử »Tập lệnh SVG cho hoạt hình
Trong ví dụ này, chúng ta tạo một vòng tròn màu đỏ. Nhấp vào hai nút để bắt đầu và dừng hoạt ảnh:
Đây là mã SVG:
Ví dụ
<svg width="600" height="100" xmlns="https://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()"
/>
Hãy tự mình thử »Giải thích mã:
- Các hàm
start()
vàstop()
bắt đầu và dừng hoạt ảnh - Hoạt ảnh bắt đầu bằng cách thiết lập bộ hẹn giờ (t) gọi hàm
animate()
cứ sau 20 mili giây với hàmsetInterval()
- Hoạt ảnh bị dừng bằng cách xóa bộ đếm thời gian t
- Hoạt ảnh được thực hiện bên trong hàm
animate()
- Nhận tham chiếu đến phần tử
<circle>
bằng hàmgetElementById()
- Lấy giá trị của thuộc tính
cx
bằnggetAttribute()
- Chuyển đổi giá trị của thuộc tính
cx
thành một số bằngparseInt()
. Sau đó thêm 2 vào giá trịcx
- Kiểm tra xem giá trị
newCX
có lớn hơn 600 hay không (là chiều rộng của "cửa sổ" SVG), sau đó đặt lại thành 50 (là vị trí bắt đầu ban đầu) - Đặt giá trị
newCX
vào thuộc tínhcx
của phần tử<circle>
bằng hàmsetAttribute()
. Điều này di chuyển vòng tròn đến vị trí cx mới