배경 이미지로 제공될 때 SVG 이미지의 채우기 색상을 수정하는 방법은 무엇입니까?
SVG 출력을 페이지 코드와 직접 연결하여 CSS로 채우기 색을 간단하게 수정할 수 있습니다.
polygon.mystar {
fill: blue;
}
circle.mycircle {
fill: green;
}
이것은 잘 작동하지만 배경 이미지로 제공될 때 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>
CSS 마스크를 사용할 수 있습니다. '마스크' 속성을 사용하여 요소에 적용되는 마스크를 만듭니다.
.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
저는 비슷한 것이 필요했고 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 파일에 포함하는 방법에 대한 자세한 내용입니다.실행 가능한 옵션이 되기에는 너무 작은 브라우저 호환성도 언급했습니다.
이를 위한 한 가지 방법은 서버 측 메커니즘에서 svg를 제공하는 것입니다.GET 매개 변수에 따라 svg를 출력하는 리소스 서버 측을 생성하면 특정 URL에서 svg를 제공할 수 있습니다.
그러면 당신은 당신의 css에 그 URL을 사용합니다.
배경 img로서, 그것은 DOM의 일부가 아니며 당신은 그것을 조작할 수 없기 때문입니다.또 다른 가능성은 규칙적으로 사용하고, 일반적인 방법으로 페이지에 포함시키지만, 절대적으로 위치를 지정하고, 페이지의 전체 너비와 높이로 만든 다음 z-index css 속성을 사용하여 페이지의 다른 모든 DOM 요소 뒤에 배치하는 것입니다.
또 다른 접근법은 마스크를 사용하는 것입니다.그런 다음 마스크된 요소의 배경색을 변경합니다.이는 svg의 채우기 속성을 변경하는 것과 동일한 효과를 갖습니다.
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 (내 튜토리얼이 아님).다양한 접근 방식(마스크에 국한되지 않음)을 제안합니다.
색상 회전, 밝기 및 채도와 함께 세피아 필터를 사용하여 원하는 색상을 만들 수 있습니다.
.colorize-pink {
filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}
https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/
Sass와 함께라면 가능합니다!당신이 해야 할 일은 당신의 svg 코드를 url-encode 하는 것뿐입니다.그리고 이것은 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);
}
이제 다음과 같이 클라이언트 측에서 이를 달성할 수 있습니다.
var green = '3CB54A';
var red = 'ED1F24';
var 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="#'+green+'" 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="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";
하려는 경우 "" CSS와 함께 사용합니다.url()식으로; 렇게이;
a:before {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 451 451"><path d="M345.441,2...
은 해야 합니다.#%23그렇지 않으면 작동하지 않을 것입니다.
<svg fill="%23FFF" ...
svg를 텍스트로 다운로드합니다.
Javascript를 사용하여 svg 텍스트를 수정하여 페인트/획량/채움 색상을 변경합니다.
그런 다음 여기에 설명된 대로 수정된 svg 문자열을 CSS에 인라인으로 포함합니다.
SVG를 변수에 저장할 수 있습니다.그런 다음 필요에 따라 SVG 문자열을 조작합니다(예: 설정 폭, 높이, 색상 등).그런 다음 결과를 사용하여 배경을 설정합니다.
$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';
$icon-color: #f00;
$icon-color-hover: #00f;
@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 svg-fill ($svg, $color) {
@return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}
@function svg-size ($svg, $width, $height) {
$svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
$svg: str-replace($svg, '<svg', '<svg height="#{$height}"');
@return $svg;
}
.icon {
$icon-svg: svg-size($circle-icon-svg, 20, 20);
width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');
&:hover {
background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
}
}
저는 http://sassmeister.com/gist/4cf0265c5d0143a9e734 라는 데모도 만들었습니다.
몇 를 들어, "SVG"라는 것입니다.<svg />요소에 기존 채우기 색상이 없으며 너비 또는 높이 속성이 설정되지 않았습니다.입력은 SCSS 문서에서 하드 코딩되므로 이러한 제약 조건을 적용하는 것이 매우 쉽습니다.
코드 중복에 대해 걱정하지 마십시오. gzip 압축은 차이를 무시할 수 있게 합니다.
밝기 필터를 사용할 수 있습니다. 값이 1보다 크면 요소가 더 밝아지고 1보다 작으면 요소가 더 어두워집니다.그래서, 우리는 밝은 SVG를 어둡게 만들 수 있고, 그 반대의 경우, 예를 들어, 이것은 svg를 어둡게 만들 것입니다.
filter: brightness(0);
밝기 수준뿐만 아니라 색상을 변경하기 위해 색상 회전, 밝기와 함께 세피아 필터를 사용할 수 있습니다. 예를 들어 다음과 같습니다.
.colorize-blue {
filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}
나이가 들었음에도 불구하고 이것이 구글에서 나오기 때문에, 저는 여기에 있는 옵션들을 보고 2022년의 먼 미래에 제가 사용하고 있는 해결책을 제시하는 것이 낫다고 생각했습니다.
이것은 사실 이전의 마스크 솔루션일 뿐이지만, 유사 요소에 대한 것입니다.
.icon {
height: 1.5rem;
width: 1.5rem;
}
.icon::before {
content: "";
display: block;
width: 100%;
height: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("path/to/svg/icon.svg");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-image: url("path/to/svg/icon.svg");
}
이것은 오늘날 모든 주요 브라우저에서 작동하지만, 이것을 사용하여 여러 색상의 SVG를 가질 수는 없습니다.사이트에서 인라인으로 주입할 수 없거나 글꼴 아이콘 등을 사용하지 않을 경우 비즈니스 비용이 발생합니다.
이를 위해 자체 SCSS 함수를 생성할 수 있습니다.config.rb 파일에 다음을 추가합니다.
require 'sass'
require 'cgi'
module Sass::Script::Functions
def inline_svg_image(path, fill)
real_path = File.join(Compass.configuration.images_path, path.value)
svg = data(real_path)
svg.gsub! '{color}', fill.value
encoded_svg = CGI::escape(svg).gsub('+', '%20')
data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
Sass::Script::String.new(data_url)
end
private
def data(real_path)
if File.readable?(real_path)
File.open(real_path, "rb") {|io| io.read}
else
raise Compass::Error, "File not found or cannot be read: #{real_path}"
end
end
end
그런 다음 CSS에서 사용할 수 있습니다.
.icon {
background-image: inline-svg-image('icons/icon.svg', '#555');
}
SVG 파일을 편집하고 마크업의 채우기 특성을 fill="{color}"로 바꿔야 합니다.
아이콘 경로는 항상 동일한 config.rb 파일의 images_dir 매개 변수에 상대적입니다.
다른 솔루션과 비슷하지만, 이는 매우 깔끔하며 SCSS 파일을 깔끔하게 유지합니다!
흰색에서 검은색 또는 그와 유사한 간단한 방법으로 교환하고 싶다면 다음을 시도해 보십시오.
filter: invert(100%);
일부(매우 구체적인) 상황에서는 필터를 사용하여 이를 달성할 수 있습니다.예를 들어, 다음을 사용하여 색상을 45도 회전하여 파란색 SVG 영상을 보라색으로 변경할 수 있습니다.filter: hue-rotate(45deg);브라우저 지원은 미미하지만 여전히 흥미로운 기술입니다.
단색 배경의 경우 배경색이 표시되어야 하는 마스크와 함께 svg를 사용할 수 있습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
<defs>
<mask id="Mask">
<rect width="100%" height="100%" fill="#fff" />
<polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
</mask>
</defs>
<rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>
그리고 이 css를 사용하는 것보다.
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);
여기서는 늦은 시간이지만 SVG 코드를 직접 편집할 수 있다면 SVG 폴리곤에 채우기 색을 추가할 수 있었습니다. 예를 들어, 다음 svg는 기본 검은색 대신 빨간색으로 렌더링됩니다.Chrome 외부에서 테스트한 적은 없지만,
<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="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<polygon
fill="red"
fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>
크로스 브라우저(일명 방탄)가 되기 위해 찾은 유일한 방법은 SVG를 PHP로 렌더링하고 쿼리 문자열을 전달하여 색상을 설정하는 것입니다.
여기서 "arrow.php"라고 불리는 SVG는
<?php
$fill = filter_input(INPUT_GET, 'fill');
$fill = strtolower($fill);
$fill = preg_replace("/[^a-z0-9]/", '', $fill);
if(empty($fill)) $fill = "000000";
header('Content-type: image/svg+xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<svg xmlns="http://www.w3.org/2000/svg" width="7.4" height="12" viewBox="0 0 7.4 12">
<g>
<path d="M8.6,7.4,10,6l6,6-6,6L8.6,16.6,13.2,12Z" transform="translate(-8.6 -6)" fill="#<?php echo htmlspecialchars($fill); ?>" fill-rule="evenodd"/>
</g>
</svg>
그런 다음 이미지를 이렇게 부릅니다.
.cssclass{ background-image: url(arrow.php?fill=112233); }
PHP에서만 작동합니다.색 값을 변경할 때마다 브라우저에 새 이미지가 로드됩니다.
다음은 그라데이션 및 흑백 아이콘을 배경 및 배경 혼합 모드로 사용하여 아이콘을 색상화하는 다른 솔루션입니다.배경색이 흰색이어야 합니다. 그렇지 않으면 전체 배경이 색칠됩니다.저는 크롬에서만 테스트를 했습니다.
.colored-background {
background-image: linear-gradient(45deg, green, green), url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-color: #fff;
background-blend-mode: lighten, normal;
background-repeat: no-repeat;
background-position: center, center right .8em;
background-size: auto, 0.6em;
color: red;
display: inline-flex;
align-items: center;
padding: 0.5em;
padding-right: 2em;
height: 1.6em;
width: auto;
border: 1px solid gray;
}
.bg {
background-color: #ddd;
padding: 1em;
}<div class="bg">
<div class="colored-background">green icon from black svg</div>
</div>여기에 연결되어 있지만 이 질문과 직접적으로 관련이 없는 닫힌 질문과 관련이 있습니다.
그래서 만약을 대비해서, 누구든 실제로 교체해야 합니다.src링크된 질문과 마찬가지로, 이미 거기에 답이 있습니다.게다가 Vue에서 오는 사람이 있다면, 그리고.src경로는 컴파일 시 변경됩니다. 다른 해결책을 생각해냈습니다.
저의 경우, 부모 요소는 링크이지만, 실제로는 무엇이든 될 수 있습니다.
<a
v-for="document in documents" :key="document.uuid"
:href="document.url"
target="_blank"
class="item flex align-items-center gap-2 hover-parent"
>
<img alt="documents" class="icon" src="../assets/PDF.svg" />
<strong>{{ document.name }}</strong>
<img class="itemImage ml-auto hide-on-parent-hover" src="../assets/download-circular-button.svg" />
<img class="itemImage ml-auto show-on-parent-hover" src="../assets/download-circular-button-hover.svg" />
</a>
.hover-parent .show-on-parent-hover { display: none }
.hover-parent .hide-on-parent-hover { display: block }
.hover-parent:hover .show-on-parent-hover { display: block }
.hover-parent:hover .hide-on-parent-hover { display: none }
그래서 여기서 해결책은 변하지 않는 것입니다.src속성,에 성둘, 다입합니다력신 둘 다 넣을 수.<img>DOM에 있는 요소를 선택하고 필요한 요소만 표시합니다.
에 고정되어야 하는 상위 요소가 없는 경우 두 이미지를 모두 간단히 랩핑할 수 있습니다.div.
<div class="hover-parent" >
<img class="hide-on-parent-hover" src="../assets/download-circular-button.svg" />
<img class="show-on-parent-hover" src="../assets/download-circular-button-hover.svg" />
</div>
"" "CSS"는 과 같습니다..hover-parent상위 항목은 직접 상위 항목이어야 합니다.
.hover-parent > .show-on-parent-hover { display: none }
.hover-parent > .hide-on-parent-hover { display: block }
.hover-parent:hover > .show-on-parent-hover { display: block }
.hover-parent:hover > .hide-on-parent-hover { display: none }
이것은 제가 가장 좋아하는 방법이지만, 당신의 브라우저 지원은 매우 진보적일 것입니다.마스크 속성을 사용하여 요소에 적용되는 마스크를 만듭니다.마스크가 불투명하거나 견고한 모든 곳에 기본 이미지가 표시됩니다.투명한 경우 기본 이미지가 마스크되거나 숨겨집니다.CSS 마스크 이미지의 구문은 배경 이미지와 유사합니다.코데펜을 보다mask
scss 생성 함수
@function url-svg($icon) {
@return url("data:image/svg+xml;utf8,#{str-replace($icon, "#", "%23")}");
}
스스스 사용
url-svg('<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="#8A8A8F"/></svg>')
css 생성
url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="%238A8A8F"/></svg>')
str-replace 함수는 부트스트랩에서 사용됩니다.
많은 IF가 있지만, 프리베이스64 인코딩 SVG가 시작되면:
<svg fill="#000000
그러면 base64 인코딩된 문자열이 시작됩니다.
PHN2ZyBmaWxsPSIjMDAwMDAw
사전 추출 문자열이 시작되는 경우:
<svg fill="#bfa76e
다음을 인코딩합니다.
PHN2ZyBmaWxsPSIjYmZhNzZl
인코딩된 두 문자열 모두 동일하게 시작합니다.
PHN2ZyBmaWxsPSIj
base64 인코딩의 특징은 매 3개의 입력 문자가 4개의 출력 문자가 된다는 것입니다.SVG가 이렇게 시작되면 인코딩 블록 '경계'에서 정확히 6자 16진수 채우기 색이 시작됩니다.따라서 크로스 브라우저 JS 대체를 쉽게 수행할 수 있습니다.
output = input.replace(/MDAwMDAw/, "YmZhNzZl");
하지만 위의 tnt-rox 답변이 앞으로 나아가는 방법입니다.
언급URL : https://stackoverflow.com/questions/13367868/how-to-modify-the-fill-color-of-an-svg-image-when-being-served-as-background-ima
'source' 카테고리의 다른 글
| 경고: 할당은 캐스트 없이 포인터의 정수를 만듭니다. (0) | 2023.08.27 |
|---|---|
| 이전에 안정적이었던 Docksal 구현에 대한 새로운 문제 (0) | 2023.08.27 |
| Xcode 4 + iOS 4.3: "아카이브 유형에 대한 패키저가 없습니다." (0) | 2023.08.27 |
| 사용자가 PHP로 파일을 업로드했는지 어떻게 확인합니까? (0) | 2023.08.27 |
| 양방향/역방향 지도 (0) | 2023.08.22 |