20: Tạo kiểu nội tuyến SVG - Quyền hạn và hạn chế - Thủ thuật CSS

SVG nội tuyến có thể được “tạo kiểu” theo nghĩa là nó đã có các nét điền và nét vẽ và không phải là thứ hai bạn đặt nó trên trang. Điều đó thật tuyệt vời và là một cách hoàn toàn tốt để sử dụng SVG nội tuyến. Nhưng bạn cũng có thể tạo kiểu SVG nội tuyến thông qua CSS, điều này thật tuyệt vời vì tôi tưởng tượng rằng đối với nhiều người trong chúng ta, CSS là nơi chúng ta cảm thấy mạnh mẽ và thoải mái.

Nó hoạt động khá nhiều như bạn mong đợi. Đây là một ví dụ đơn giản:

.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )

Bạn có thể nói CSS có “nhiều sức mạnh” hơn một chút so với các thuộc tính style trên chính các phần tử SVG. Nếu điều đó xảy ra như fill="red"vậy, CSS vẫn sẽ "thắng". Bạn có thể nghĩ ngược lại vì có vẻ như các thuộc tính kiểu sẽ mạnh mẽ như kiểu nội tuyến, nhưng thực tế thì không. Phong cách nội tuyến là vẫn mặc dù mạnh mẽ.

Tương tự như vậy, các quy tắc CSS không phân tầng nếu có bất kỳ điều gì cụ thể hơn xảy ra. Ví dụ:

.parent ( fill: red; )

CSS thua trong trường hợp này, vì màu xanh lam đang được áp dụng cụ thể hơn cho trực tràng.

Nếu tôi dự định tạo kiểu cho SVG thông qua CSS, tôi thường thấy dễ dàng nhất là chỉ cần loại bỏ các thuộc tính kiểu hoàn toàn khỏi các phần tử SVG.

Điều quan trọng cần biết cảnh giác!

Chúng tôi đã dành thời gian để nói về . Giả sử đây là tình huống:

Cuối cùng thì "con" được đặt trong "cha mẹ" đó phải không? Đúng. Vì vậy, điều này nên làm việc?

.parent .child ( fill: red; )

Nhưng nó không.

Theo cách thức hoạt động, nó sao chép điều đó và đặt nó vào một “Shadow DOM” trong SVG thứ hai đó. Bạn không thể thâm nhập qua DOM bóng đó bằng một bộ chọn như vậy. Chỉ không hoạt động. Có lẽ một ngày nào đó sẽ có giải pháp, nhưng hiện tại thì không.

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