6
Khi một viết mã SVG này, với CSS nhúng:Hành vi đúng của thẻ SVG "defs" trong CSS là gì?
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">
<style>
defs rect
{
fill: blue;
}
</style>
<defs>
<rect id="rectangle" x="5" y="10" width="3" height="3"/>
</defs>
<rect x="5" y="5" width="3" height="3"/>
<use xlink:href="#rectangle"/>
</svg>
Sau đó, Chrome không áp dụng các "điền: màu xanh" quy tắc để rect thứ hai thông qua thẻ sử dụng (rect vì vậy đầu tiên là màu đen, thứ hai có màu xanh dương), trong khi firefox không áp dụng quy tắc (cả hai đường đều có màu đen).
Đó có phải là con bọ lửa không? Có cái gì tôi không nhận được? Hay tiêu chuẩn nói "thẻ defs nên chặn bộ chọn CSS"?
Sử dụng 'defs' làm công cụ chọn giống như sử dụng' title' trong HTML. Bạn thường sẽ không làm điều đó vì 'defs' chỉ là một container hợp lý, không phải là một khối bạn thường phong cách. Nếu đó là một lỗi, nó chắc chắn là một lỗi có thể tránh được. Các phần tử trong 'defs' chỉ hữu ích với' id' vì chúng cần được giới thiệu ở nơi khác để hữu ích, vì vậy bạn luôn có thể tham chiếu đến một phần tử như vậy bằng cách sử dụng id của nó. – helderdarocha
@helderarocha Được rồi cho #id và .class, nhưng nếu tôi muốn áp dụng quy tắc theo tên của nút, như ở đây thì sao? Vâng, tôi sẽ xem đó là lỗi vì vậy tôi sẽ báo cáo nó với firebug. – Xenos
nếu bạn chỉ sử dụng id hoặc tập tin attribut nội tuyến, nó hoạt động, lỗi là morelike: tại sao nó nên điền quá? http://codepen.io/anon/pen/uoqwr/ –