Chỉ định SVG làm hình nền và C ALNG phong cách SVG trong CSS?

Question

Có thể chỉ định SVG làm hình nền và C ALNG phong cách SVG trong cùng một tệp CSS không?

Tôi rất thoải mái khi đặt, chia tỷ lệ và cắt ảnh SVG dưới dạng tệp đơn hoặc sprites, nhưng tôi đã không thể tìm ra nếu có thể tạo kiểu SVG trong cùng một tệp CSS như đặt nó làm hình nền.

Trong pseudo CSS tôi muốn làm những điều sau đây để thay đổi màu sắc của hình dạng đơn giản dựa trên lớp của phần tử cha mẹ:

element1 { 
background-image(icon.svg); 
} 

element1.black .svg-pathclass { 
fill: #000000; 
} 

element1.white .svg-pathclass { 
fill: #ffffff; 
} 

rõ ràng điều này giả định một con đường trong lớp .svg SVG có -pathclass

là điều này có thể?

Answer 1

Không, điều này là không thể. SVG phải được chuẩn bị trong một tài liệu (có thể là data URI hoặc tệp được tham chiếu bên ngoài) và sau đó được sử dụng làm nền trong tệp khác.

Answer 2

Bạn có thể sử dụng SVG và CSS mặt nạ để tái tạo hiệu ứng này, sau đó sử dụng bình thường CSS để tạo kiểu bên trong SVG, thậm chí background-image

-webkit-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 
    -o-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 
    -ms-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 

background-color: red; 
background-image: url(animated.gif); 

/* Filename, Position/Size, Repeat */ 
/* Modernizr.cssmask is the test needed to pass - snippet below */ 

Bạn có thể sử dụng để tạo đổ bóng bằng cách thêm một element để DOM và tạo kiểu với chỉ số z thấp hơn và đặt độ mờ.

Hy vọng điều đó sẽ hữu ích!

Edit: Liên kết

• Modernizr Test - http://pastebin.com/w4eVbEKr
• Một số biết thêm thông tin - https://www.webkit.org/blog/181/css-masks/

Answer 3

Nó thực sự tốt đối với những người có thể sử dụng preprocessors trong sản xuất, bởi "nội tuyến" SVG nền, và bit của SASS mixins, trong đó "cắt" toàn bộ svg vô nghĩa, để truy cập vào các phần bạn muốn thao tác qua SASS variables.

Trong kịch bản ban đầu của bạn, bạn có một yếu tố
<div class="element1"></div>,

vì vậy bạn cần một mixin/function mà sẽ inline SVG cho bạn.Hãy nói rằng bạn muốn kiểm soát của fill, vì vậy:

@mixin inline-svg($color, $svg-content) { 
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>'; 
    $end: '</svg>'; 

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); 
} 

nơi $svg-content biến là <svg> công cụ của bạn trừ <style> yếu tố (mà bạn muốn truy cập từ bên trong mixin) và gói svg thẻ ,, ví dụ: $svg-content = "<path .... />"

này chỉ cần được bao gồm trong giá trị được truyền bên trong:
@include inline-svg(salmon, $svg-content);

tóm whol e điều lên, đây là một ví dụ Sass mã:

$svg-content = "<path .... />" 

@mixin inline-svg($color, $svg-content) { 
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>'; 
    $end: '</svg>'; 

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); 
} 

.element1 { 
    @include inline-svg(rgba(0,0,0,0.6), $svg-content); 
} 

Tôi nghĩ khả năng đây là khá lớn (cũng có những hạn chế ở đây cách tiếp cận đó). Tôi thực sự chuyển một số SASS map tới mixin của mình với css kiểu được định nghĩa là key, value cặp, để tiêm toàn bộ nhóm css kiểu vào <style> một phần của svg. Vì vậy, về mặt kỹ thuật có thể, nhưng yêu cầu sự hợp tác hơn, nhưng khi bạn hoàn thành việc này, bạn sẽ nhận được lợi ích khi sử dụng lại số mixin trong suốt (các) dự án của bạn, điều này thật tuyệt.