Chỉnh sửa kiểu SVG từ javascript

Question

Tôi có bản đồ SVG của thế giới và tôi muốn tô màu từng khu vực theo các số liệu khác nhau theo thời gian thực bằng cách thay đổi các thuộc tính kiểu cho từng vùng trong svg. EG Tôi muốn nhuộm màu xanh nước Anh để phản ánh chiến thắng tory sắp tới (ahem).

Điều này cần phải năng động vì dữ liệu thường xuyên thay đổi và được đẩy ra trình duyệt.

Answer 1

Bạn có thể áp dụng kiểu dáng CSS cho phần tử SVG. Không cần phải nói, điều này đòi hỏi một đánh dấu phù hợp. Vì vậy, ví dụ, nếu bản đồ của bạn trông giống như sau (:-) RẤT đơn giản

<svg> 
    <g id="USA">...</g> 
    <g id="UK">...</g> 
</svg> 

Bạn chỉ có thể làm như sau:

var country = document.getElementById("UK"); 
country.setAttribute("style", "fill: blue; stroke: black"); 

Tất nhiên nó cũng có thể nhúng stylesheets vào một tài liệu SVG :

<svg> 
    <defs> 
    <style type="text/css"> 
     <![CDATA[ 
     // insert CSS rules here 
     ]]> 
    </style> 
    </defs> 
</svg> 

Và cuối cùng, nó cũng có thể bao gồm một stylesheet bên ngoài vào một tài liệu SVG:

<?xml version="1.0" standalone="no"?> 
<?xml-stylesheet href="style.css" type="text/css"?> 
<svg> 
    ... 

Answer 2

tôi trường hợp bạn không muốn thay đổi toàn bộ phong cách, bạn có thể làm:

var country = document.getElementById("UK"); 
country.style.fill = "blue"; 
country.style.stroke = "black";