배경 이미지로 제공 될 때 SVG 채우기 색상 수정 {

SVG 출력을 페이지 코드와 직접 인라인으로 배치하면 CSS를 사용하여 채우기 색상을 간단하게 수정할 수 있습니다.

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

이것은 훌륭하게 작동하지만 SVG가 배경 이미지로 제공 될 때 SVG의 “채우기”속성을 수정하는 방법을 찾고 있습니다.

html {
    background-image: url(../img/bg.svg);
}

지금 색상을 어떻게 바꿀 수 있습니까? 가능합니까?

참고로 외부 SVG 파일의 내용은 다음과 같습니다.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>


답변

이를 수행하는 한 가지 방법은 일부 서버 측 메커니즘에서 svg를 제공하는 것입니다. GET 매개 변수에 따라 svg를 출력하는 자원 서버 측을 작성하고 특정 URL에이를 제공하십시오.

그런 다음 CSS에서 해당 URL을 사용하십시오.

배경 이미지로서 DOM의 일부가 아니므로이를 조작 할 수 없습니다. 또 다른 가능성은 정기적으로 사용하고 정상적인 방법으로 페이지에 포함 시키지만 절대로 배치하고 페이지의 전체 너비 및 높이를 만든 다음 z-index css 속성을 사용하여 다른 모든 DOM 요소 뒤에 배치하는 것입니다 페이지에.


답변

비슷한 것이 필요했고 CSS를 고수하고 싶었습니다. 다음은 LESS 및 SCSS 믹스 인과이를 지원하는 일반 CSS입니다. 불행히도 브라우저 지원은 약간 느슨합니다. 브라우저 지원에 대한 자세한 내용은 아래를 참조하십시오.

덜 믹스 인 :

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

적은 사용량 :

.element-color(#fff);

SCSS 믹스 인 :

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS 사용법 :

@include element-color(#fff);

CSS :

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

전체 SVG 코드를 CSS 파일에 포함시키는 방법에 대한 자세한 내용은 다음과 같습니다 . 또한 실행 가능한 옵션이 되기에는 브라우저 호환성이 너무 작습니다.


답변

CSS 마스크를 사용할 수 있습니다. ‘mask’속성을 사용하면 요소에 적용되는 마스크를 만듭니다.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

자세한 내용은이 훌륭한 기사를 참조하십시오 : https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images


답변

또 다른 방법은 마스크를 사용하는 것입니다. 그런 다음 마스크 된 요소의 배경색을 변경합니다. 이는 svg의 fill 속성을 변경하는 것과 동일한 효과를 갖습니다.

HTML :

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

CSS :

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (내 자신의 것이 아님) 전체 자습서를 찾을 수 있습니다. 다양한 접근 방식을 제안합니다 (마스크에만 국한되지 않음).


답변

Sass로 가능합니다! 당신이해야 할 유일한 것은 svg 코드를 URL 인코딩하는 것입니다. 그리고 이것은 Sass의 도우미 기능으로 가능합니다. 이를 위해 코드 펜을 만들었습니다. 이거 봐요:

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}

답변

 .icon {
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange {
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

코드 벤 기사 및 데모


답변

svg를 텍스트로 다운로드하십시오.

페인트 / 스트로크 / 채우기 색상을 변경하려면 자바 스크립트를 사용하여 svg 텍스트를 수정하십시오.

그런 다음 여기에 설명 된대로 수정 된 svg 문자열을 CSS에 인라인으로 포함시킵니다 .