Tạo Inline SVGs với HTML5

Với HTML5, bạn có thể nhúng SVG (Scalable Vector Graphics) đánh dấu trực tiếp vào trang web của bạn. Trong hướng dẫn này, dịch vụ thiết kế website sẽ  đi qua quá trình bao gồm một yếu tố SVG đơn giản trong một trang HTML. Chúng tôi cũng sẽ chạy qua các kỹ thuật để thay đổi SVGs trong JavaScript trong trường hợp này là thích hợp hơn để sử dụng phần tử thiết kế web HTML5.

Với HTML5, các nhà phát triển có một sự lựa chọn giữa các yếu tố  và nội tuyến SVGs. Đó là một lợi thế thực sự phụ thuộc vào các chi tiết của một dự án. Nói chung, SVG mang lại lợi thế mà những hình ảnh kết quả là rất khả năng mở rộng với môi trường sử dụng khác nhau, mà không làm giảm chất lượng. SVGs cũng có thể là một phần của các thành phần tương tác và hoạt hình, vì các yếu tố SVG là một phần của đánh dấu trang HTML, bất cứ phần nào trong đó có thể được thao tác bằng cách sử dụng DOM.

Thêm phần tử SVG

Bạn có thể thêm một SVG trực tiếp vào phần thân trang, bằng cách sử dụng đánh dấu cùng bạn sẽ sử dụng cho một tập tin SVG riêng biệt. Thêm các thẻ cơ thể sau đây giữa mở và đóng cửa:

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ height=”400″>

<defs> <radialGradient id=”myGradient” cx=”50%” cy=”50%” r=”50%” fx=”50%” fy=”50%”>

<stop offset=”0%” /> <stop offset=”100%” /> </radialGradient> </defs>

<ellipse cx=”200″ cy=”200″ rx=”80″ ry=”60″/> </svg>

 

Điều chỉnh người dùng

Hãy làm cho các trang tương tác bằng cách bắt người dùng nhập vào. Thêm phần sau đây vào thân trang của bạn, dưới đây là yếu tố SVG:

<br/> Enter the radius for the X axis:<br/>

<input type=”text” id=”radiusX”/><br/> Enter the radius for the Y axis:<br/>

<input type=”text” id=”radiusY”/><br/>

<input type=”button” value=”redraw” onclick=”redrawEl

Chúng tôi sẽ cho phép người dùng lựa chọn các giá trị cho X và Y trong vòng bán kính hình elip. Khi nút được nhấn, nó sẽ gọi một chức năng để làm thay đổi đánh dấu SVG.

Thay đổi SVG

Thêm chức năng JavaScript sau vào phần kịch bản trong lĩnh vực đầu trang của bạn:

//function to redraw the svg function redrawEllipse() {

//get the input x radius var xRadius = document.getElementById(“radiusX”).value;

//get the input y radius var yRadius = document.getElementById(“radiusY”).value;

//get the ellipse element var ellipse = document.getElementsByTagName(“ellipse”)[0];

//set the new x radius ellipse.setAttribute(“rx”, xRadius); //set the new y radius ellipse.setAttribute(“ry”, yRadius); }
Chức năng đầu tiên lấy người dùng nhập vào, sau đó nhận được một tham chiếu đến các yếu tố hình elip trong SVG. Các kịch bản sau đó đặt thuộc tính cho X và Y bán kính bằng cách sử dụng các giá trị đầu vào người sử dụng. Mở trang của bạn trong một trình duyệt và nhập giá trị mới cho thấy sự thay đổi SVG động. Với các đánh dấu trang trên đồ họa sẽ có thể phù hợp với bất cứ điều gì lên đến 200 trên mỗi trục.

Kết luận

Tạo Inline SVGs với HTML5 mang lại cho các nhà phát triển web một lựa chọn cho hình ảnh nguyên bản được mã hóa dưới dạng nội tuyến SVGs và bản vẽ. Nếu bạn cần một hình ảnh vector mà sẽ mở rộng quy mô lên xuống cho màn hình người dùng, SVGs có thể là một lựa chọn đáng tin cậy. SVGs cũng được thiết kế web chuẩn seo  để hỗ trợ hình ảnh động với DOM kịch bản, bạn có thể xử lý trong kịch bản tương tự như phần còn lại của chức năng trang web của bạn. Thực tế là SVGs được viết bằng mã XML cũng khiến cho chúng dễ tiếp cận hơn. Dù lựa chọn như thế nào, bạn vẫn phải dựa vào các chương trình của bên thứ ba để tạo ra đồ họa trang web và hình ảnh động của bạn có thể sắp kết thúc.

Summary
Reviewer
Hoàng Lệ Giang
Review Date
Reviewed Item
Tạo Inline SVGs với HTML5 hướng dẫn cách thêm phần tử svg vào trang web đơn giản
Author Rating
5

Comments

Bình luận