SVG를 배경 이미지로 지정하고 CSS에서 SVG의 스타일을 지정 하시겠습니까?

Question

SVG를 배경 이미지로 지정하고 동일한 CSS 파일에서 SVG 스타일을 지정할 수 있습니까?

SVG 이미지를 단일 파일이나 스프라이트로 배치하고 크기를 조정하는 것이 매우 편하지만 동일한 CSS 파일 내에서 SVG의 스타일을 지정하는 것이 가능하다면 해결하지 못했습니다. 배경 이미지. 의사 CSS에서

내가 부모 요소의 클래스를 기반으로 간단한 형태의 색상 변화하기 위해 다음을 수행 싶습니다

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

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

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

분명히 이것은 SVG 가진 클래스 .svg의 경로를 가정 -pathclass

이 가능합니까?

Answer 1

아니요, 불가능합니다. SVG는 하나의 문서 (data URI 또는 외부 참조 된 파일 일 수 있음)에 준비되어야하고 다음에이 다른 파일의 배경으로 사용되어야합니다.

Answer 2

당신은 당신이 element에 추가하여 그림자를 만들려면이 사용할 수 CSS도, 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 */ 

을 SVG의 내부 스타일을 한 후 정상 사용이 효과를 다시 SVG 및 CSS 마스크를 사용할 수 있습니다 DOM을 사용하고 더 낮은 z- 인덱스로 불투명도를 설정하여 스타일을 지정하십시오.

희망 하시겠습니까?

편집 :

• 모더 나이저 테스트 링크 - http://pastebin.com/w4eVbEKr
• 일부 자세한 내용은 - "인라인"배경 SVG에 의해, 생산 처리기를 사용할 수 있습니다 사람들이 실제로 가능 https://www.webkit.org/blog/181/css-masks/

Answer 3

, SASS variables을 통해 조작하려는 부분에 액세스하려면 전체 svg을 "슬라이스"하는 SASS mixins 비트가 필요합니다. 원래 시나리오에서

당신은

은 그래서 당신은 당신을 위해 SVG 인라인 것 mixin/function 필요
<div class="element1"></div>, 요소를 가지고있다.자, 당신은 fill의 제어하려는 가정 해 봅시다 : $svg-content 변수가 <style> (당신이 mixin의 내부에서 액세스 할) 요소와 svg 태그를 포장 ,, 예를 제외하고 당신의 <svg> 물건

@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}'); 
} 

입니다 : 를
@include inline-svg(salmon, $svg-content);

하여도 ë을 요약하면 : $svg-content = "<path .... />"

이 그냥 필요

은 내부에 전달 된 값에 포함되는 여기 가능성 (제한하는 접근 방식도 여기에있다) 아주 큰 생각

$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); 
} 

: 전자의 것은 위로, 이것은 예를 SASS 코드입니다. 실제로 SASS map을 내 mixin에 css 스타일로 key, value 쌍으로 정의하여 css 스타일의 전체 묶음을 svg 부분에 삽입합니다.

기술적으로는 가능하지만 더 많은 compexity가 필요하지만이 작업을 완료하면 프로젝트 전체에서이 mixin을 재사용 할 수있는 이점이 있습니다.