SVG: Sử dụng thuộc tính hoặc CSS để tạo kiểu?

Question

Trong HTML, bạn nên tách riêng Nội dung khỏi Kiểu, do đó bạn nên tạo các tệp CSS bên ngoài cho kiểu của mình. Vì tôi mới bắt đầu với SVG, tôi tự hỏi: Quy tắc này cũng áp dụng cho SVG?

Kiểu mã được xem là tốt hơn là gì?

• <circle fill="yellow" />
• hoặc <circle style="fill: yellow;" />

Answer 1

Tôi thường thích <circle fill="yellow" /> đến <circle style="fill: yellow;" /> vì nó ngắn hơn và dễ thao tác hơn, ví dụ: getAttributeNS(null, "fill").

Nhưng qua đó tôi muốn sử dụng một yếu tố phong cách riêng biệt, cũng như với HTML, ví dụ:

<style> 
    circle{ 
     fill: yellow; 
    } 
    </style>  

Trong đó có tất cả những ưu điểm giống nhau của việc sử dụng CSS, chẳng hạn như làm cho nó dễ dàng để thay đổi stlye của nhiều phần tử cùng một lúc.

Bạn cũng có thể đặt CSS của bạn trong một tập tin bên ngoài và thêm:

<?xml-stylesheet type="text/css" href="your_CSS.css" ?> 

Trước khi các yếu tố svg.

Answer 2

Sự khác biệt luôn là nếu nội dung của nó hoặc nó trình bày.

Nếu vòng tròn là nội dung và nó phải hiển thị có hay không có sẵn css, thì tùy chọn đầu tiên là tùy chọn.

Nhưng nếu vòng tròn chỉ là một phần của trang web disign và không thêm bất kỳ nội dung nào vào nội dung thì đó phải là tùy chọn thứ hai. Hoặc sử dụng một lớp css.

Answer 3

Tôi đến đây vì tôi đang cố gắng nhớ liệu các thuộc tính hoặc kiểu có ưu tiên cao hơn hay không. Đây là một trong những lý do thực tế tại sao bạn muốn cái khác.

Thuộc tính được áp dụng làm "gợi ý bản trình bày", như thể chúng là lần đầu tiên trong các bảng định kiểu xếp tầng. In other words, this gives them lowest precedence.

Do đó, ưu tiên, từ thấp nhất đến cao nhất, là

1. thuộc tính
2. phong cách CSS tờ
3. kiểu inline

Đó là một chút bối rối mà một phong cách nội tuyến có lớn hơn nhiều ưu tiên hơn thuộc tính bên cạnh. (Tôi vẫn phải xem xét điều này!)

Chi tiết khác có thể tìm thấy ở cuối số Presentation Attributes section of the SVG styling document.