Làm cách nào để thêm svg vào trang web của tôi và thay đổi màu của nó qua css?Thêm svg vào trang web?
Tôi đã thử:
<img src="my.svg" class="svg"/>
.svg{
fill: white;
}
Nhưng không may mắn.
Chỉ có các giải pháp CSS và tôi không cần bất kỳ dự phòng nào, chỉ hỗ trợ các trình duyệt mới.
Nó sẽ không hoạt động theo cách này. Bạn có thể thay đổi màu sắc lấp nếu bạn đang trực tiếp bao gồm các svg, ví dụ:
HTML:
<p>Some other webpage content</p>
<svg class="my-svg">
<g>
<path fill="..."></path>
<path fill="..."></path>
</g>
</svg>
<p>Some other webpage content</p>
CSS:
.my-svg *{
fill:white;
}
Vì vậy, bạn web kiểm tra my.svg, và copy- dán nội dung của nó vào trang đích. Sau đó, bạn có thể tạo kiểu cho nó.
Có nhiều cách để bao gồm SVG, hãy xem tại đây: https://css-tricks.com/using-svg. Điều quan trọng là phải nói rằng một số cách có thể trông dễ dàng hơn (như sử dụng một thẻ '![]()
' như bạn đã làm hoặc sử dụng nó như là một 'background-image') nhưng nó chỉ gây ra vấn đề bạn đang phải đối mặt: không thể xếp chồng bên ngoài CSS bên trong SVG , tức là kiểu dáng của trang không được phản ánh bên trong SVG đã tải. –