img src SVG CSS를 사용하여 스타일 변경
html
<img src="logo.svg" alt="Logo" class="logo-img">
CSS
.logo-img path {
fill: #000;
}
으로 svg로 표시됩니다.fill: #fff하지만 위의 것들을 사용할 때는css검은색으로 바꾸려고 시도해봤는데 바뀌지 않아요, SVG로 하는 건 처음인데 왜 안 되는지 모르겠어요.
SVG를 마스크로 설정할 수 있습니다.그런 식으로 배경색을 설정하면 채우기 색으로 작동합니다.
HTML
<div class="logo"></div>
CSS
.logo {
background-color: red;
-webkit-mask: url(logo.svg) no-repeat center;
mask: url(logo.svg) no-repeat center;
}
JSFidle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
브라우저가 이 기능을 지원하는지 확인하십시오. https://caniuse.com/ #search=mask
순수 CSS 사용:
.logo-img {
/* to black */
filter: invert(1);
/* or to blue */
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}
이 기사의 더 많은 정보 https://blog.union.io/code/2017/08/10/img-svg-fill/
만약 당신의 목표가 단지 로고의 색을 바꾸는 것이고 CSS를 사용할 필요가 없다면, 이전의 몇몇 답변에서 제안된 것처럼 자바스크립트나 jquery를 사용하지 마세요.
원래 질문에 정확하게 답하려면 다음과 같이 하십시오.
.
logo.svg텍스트 편집기에서fill: #fff그리고 그것을 대체합니다.fill: #000
를 들어, 여러분의 를들어, 당의신이 있습니다.logo.svg텍스트 편집기에서 열 때 다음과 같이 나타날 수 있습니다.
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>
내용물을 바꾸고 저장하기만 하면 됩니다.
동적 색상을 원하는 경우 Javascript를 사용하지 않고 인라인 SVG를 사용하지 않으려면 CSS 변수를 사용합니다.Chrome, Firefox 및 Safari에서 작동합니다.편집: 및 모서리
<svg>
<use href="logo.svg" style="--color_fill: #000;"></use>
</svg>
SVG의 .style="fill: #000"와 함께style="fill: var(--color_fill)".
먼저 HTML DOM에 SVG를 주입해야 합니다.
이것을 해주는 SVGInject라는 오픈 소스 라이브러리가 있습니다.를 사용합니다.onload주입을 트리거하는 속성입니다.
다음은 SVGInject를 사용하는 최소한의 예입니다.
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
에는 이지가 onload="SVGInject(this)와 주을트하고거리입을 .<img>는 SVG 파일에 됩니다.src기여하다.
SVG 주입을 통해 다음과 같은 몇 가지 문제를 해결합니다.
주입이 완료될 때까지 SVG를 숨길 수 있습니다.로드 시간 중에 스타일이 이미 적용된 경우, 그렇지 않으면 "스타일링되지 않은 콘텐츠 플래시"가 잠깐 발생할 수 있으므로 이 점이 중요합니다.
그
<img>요소는 자동으로 자체 주입됩니다.SVG를 동적으로 추가하면 주입 기능을 다시 호출할 걱정이 없습니다.SVG가 두 번 이상 주입되는 경우 문서에서 동일한 ID를 여러 번 갖지 않도록 SVG의 각 ID에 임의 문자열이 추가됩니다.
SVGInject는 일반 Javascript이며 SVG를 지원하는 모든 브라우저에서 작동합니다.
고지 사항:저는 SVGInject의 공동 저자입니다.
파일을 하고 SVG 파일을 합니다.fill="currentColor"해야 합니다. "g" "fill 속성은 다음과 같습니다."
예:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>
:currentColor키워드입니다(사용 중인 고정 색상이 아님).
그런 다음 CSS를 사용하여 다음과 같이 설정하여 색상을 변경할 수 있습니다.color요소의 속성 또는 요소의 상위 속성.
예:
.div-with-svg-inside {
color: red;
}
SVG는 다음과 같이 삽입해야 합니다.
<svg>
<use xlink:href='/assets/file.svg#img' href="/assets/file.svg#img"></use>
</svg>
이미지가 어떤 변수에서 오는 경우
<svg>
<use [attr.xlink:href]="somevariable + '#img'" [attr.href]="somevariable + '#img'"></use>
</svg>
Note that `#img` is the id of the `svg` tag inside svg file. Also note `xlink:href` has been deprecated instead you should use `href` or use can use both to support older browser versions.
Another way of doing it: [https://css-tricks.com/cascading-svg-fill-color/][1]
[1]: https://css-tricks.com/cascading-svg-fill-color/
저는 당신의 색상을 선택할 것을 제안합니다. 그리고 이 펜 https://codepen.io/sosuke/pen/Pjoqqp 으로 이동하면 HEX를 CSS 필터로 변환할 것입니다. 예:#64D7D6
대등한
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
마지막 토막글
.filterit{
width:270px;
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
}<img src="https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg"
class="filterit
/>이 답변은 https://stackoverflow.com/a/24933495/3890888 에 기반을 두고 있지만 여기에 사용된 스크립트의 일반 자바스크립트 버전을 사용합니다.
SVG를 인라인 SVG로 만들어야 합니다.클래스를 추가하여 이 스크립트를 사용할 수 있습니다.svg이미지:
/*
* Replace all SVG images with inline SVG
*/
document.querySelectorAll('img.svg').forEach(function(img){
var imgID = img.id;
var imgClass = img.className;
var imgURL = img.src;
fetch(imgURL).then(function(response) {
return response.text();
}).then(function(text){
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text, "text/xml");
// Get the SVG tag, ignore the rest
var svg = xmlDoc.getElementsByTagName('svg')[0];
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
svg.setAttribute('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
svg.setAttribute('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
svg.removeAttribute('xmlns:a');
// Check if the viewport is set, if the viewport is not set the SVG wont't scale.
if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
}
// Replace image with new SVG
img.parentNode.replaceChild(svg, img);
});
});
그리고 나서, 만약 당신이 한다면,
.logo-img path {
fill: #000;
}
또는 다음과 같을 수 있습니다.
.logo-img path {
background-color: #000;
}
JSFidle: http://jsfiddle.net/erxu0dzz/1/
필터를 사용하여 모든 색상으로 변환합니다.
저는 최근에 이 해결책을 찾았고, 누군가가 그것을 사용할 수 있기를 바랍니다.솔루션은 필터를 사용하므로 모든 유형의 이미지에 사용할 수 있습니다.svg 뿐만 아니라,
색상만 변경하려는 단일 색상 이미지가 있는 경우 일부 필터를 사용하여 이 작업을 수행할 수 있습니다.물론 다양한 색상의 이미지에서도 작동하지만 특정 색상을 대상으로 할 수는 없습니다.전체적인 이미지만.
필터는 CSS 필터만 사용하여 검은색을 임의의 색상으로 변환하는 방법에서 제안된 스크립트에서 왔습니다. 흰색을 임의의 색상으로 변경하려면 각 필터의 반전 값을 조정할 수 있습니다.
.startAsBlack{
display: inline-block;
width: 50px;
height: 50px;
background: black;
}
.black-green{
filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}
.black-red{
filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}
.black-blue{
filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}
.black-purple{
filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}Black to any color: <br/>
<div class="startAsBlack black-green"></div>
<div class="startAsBlack black-red"></div>
<div class="startAsBlack black-blue"></div>
<div class="startAsBlack black-purple"></div>당신의 svg 이미지나 이미지로 웹 폰트를 만들고, css에서 웹 폰트를 가져온 다음 css 색상 속성을 사용하여 글리프의 색상을 변경하는 것은 어떻습니까?Javascript가 필요하지 않습니다.
단순..
다음 코드를 사용할 수 있습니다.
<svg class="logo">
<use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>
먼저 svg의 경로를 지정한 다음 ID를 입력합니다. 이 경우 "Capa_1".svg의 ID는 어느 에디터에서나 열어서 얻을 수 있습니다.
CSS:
.logo {
fill: red;
}
@Praveen의 대답은 확실합니다.
저는 제 작업에서 응답할 수 없어서 jquery hover 기능을 만들었습니다.
CSS
.svg path {
transition:0.3s all !important;
}
JS / JQuery
// code from above wrapped into a function
replaceSVG();
// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#CCC');
}, function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#3A3A3A');
});
이미지를 실제 색상과 흑백 간에 전환하는 경우 하나의 선택기를 다음과 같이 설정할 수 있습니다.
{filter:filter;}
다음과 같은 다른 이름:
{filter:grayscale(100%);}
SVG는 기본적으로 코드이기 때문에 콘텐츠만 있으면 됩니다.저는 PHP를 사용하여 콘텐츠를 얻었지만, 당신은 원하는 것을 사용할 수 있습니다.
<?php
$content = file_get_contents($pathToSVG);
?>
그런 다음, div 컨테이너 안에 있는 내용을 "있는 그대로" 인쇄했습니다.
<div class="fill-class"><?php echo $content;?></div>
CSS에서 컨테이너의 SVG 자식에 대한 규칙을 최종적으로 설정하려면 다음과 같이 하십시오.
.fill-class > svg {
fill: orange;
}
재료 아이콘 SVG를 사용하여 다음과 같은 결과를 얻었습니다.
Mozilla Firefox 59.0.2(64비트) Linux
Google Chrome 66.0.3359.181 (빌드 공식) (64비트) Linux
오페라 53.0.2907.37 리눅스
@gringo answer를 확장하려면 다른 answer에 설명된 Javascript 방법이 작동하지만 사용자가 불필요한 이미지 파일을 다운로드해야 하며 IMO는 당신의 코드를 부풀립니다.
1색 벡터 그래픽을 모두 웹 폰트 파일로 마이그레이션하는 것이 더 좋은 방법일 것 같습니다.저는 과거에 Fort Awesome을 사용한 적이 있으며, SVG 형식의 사용자 지정 아이콘/이미지와 함께 사용 중인 타사 아이콘(Font Awesome, Bootstrap 아이콘 등)을 사용자가 다운로드해야 하는 단일 웹 글꼴 파일로 결합할 수 있습니다.또한 사용자 지정할 수 있으므로 사용 중인 타사 아이콘만 포함할 수 있습니다.이렇게 하면 페이지가 요청해야 하는 수가 줄어들며, 특히 타사 아이콘 라이브러리를 이미 포함하고 있는 경우 전체 페이지 무게가 줄어듭니다.
좀 더 발전된 옵션을 선호하는 경우 "npm svg webfont"를 구글에 검색하여 사용자 환경에 가장 적합한 노드 모듈 중 하나를 사용할 수 있습니다.
이 두 가지 옵션 중 하나를 수행하면 CSS를 통해 쉽게 색상을 변경할 수 있으며, 이 과정에서 사이트 속도가 빨라졌을 가능성이 높습니다.
은 이은사람사데는될도수있다습니이움용하것이들▁using를 사용하는 사람들에게 이 될 수 .PHP .svg그들이 CSS로 조작하기를 원하는 이미지.
CSS로 img 태그 내부의 속성을 덮어쓸 수 없습니다.하지만 svg 소스 코드가 HTML에 포함되면 확실히 할 수 있습니다.는 이 를 저는이문싶습다니고로 하고 싶습니다.require_once가 를포경우는하함을 .svg.php를 가져오는 CSS!로 스타일을 수 있습니다. CSS로 수 있습니다.
먼저 svg 파일을 포함합니다.
<?php require_once( '/assets/images/my-icon.svg.php' ); ?>
예를 들어 다음과 같은 아이콘이 있습니다.
<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>
이제 CSS를 사용하여 다음과 같이 채우기 색을 쉽게 변경할 수 있습니다.
svg path {
fill: blue;
}
를▁with▁problem▁this다▁i▁tried로 이 문제를 해결하려고 했습니다.file_get_contents()하지만 위의 해결책이 훨씬 빠릅니다.
큰이 ""에서 svg를 것은 svg를 emport하는 입니다.<img>SVG 구조를 숨길 태그입니다.
은 사을용합니다야를 해야 합니다.<svg>태를사여하와 함께 <use>원하는 효과를 얻을 수 있습니다.그것이 작동하도록 하려면, 당신은 그것을 줄 필요가 있습니다.id 파일에서 를 지정합니다.<path id='myName'...> 그면그을검수있다니습색에서 할 수 .<use xlink:href="#myName"/>태그. 아래에 캡처해 보세요.
.icon {
display: inline-block;
width: 2em;
height: 2em;
transition: .5s;
fill: currentColor;
stroke-width: 5;
}
.icon:hover {
fill: rgba(255,255,255,0);
stroke: black;
stroke-width: 2;
}
.red {
color: red;
}
.blue {
color: blue;
}<svg width="0" height="0">
<defs>
<path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/>
</svg>
<span class="icon red">
<svg viewbox="0 0 100 100">
<use xlink:href="#home"/>
</svg>
</span>
<span class="icon blue">
<svg viewbox="0 0 100 100">
<use xlink:href="#home"/>
</svg>
</span>프래그먼트 앞에 URL을 지정할 수 있습니다.#외부 소스에서 SVG를 로드하고 HTML에 포함하지 않으려는 경우.또한 일반적으로 CSS에 대한 채우기를 지정하지 않습니다.사용을 고려하는 것이 좋습니다.fill:"currentColor"SVG 자체 내에서.그러면 해당 요소의 CSS 색상 값이 제자리에 사용됩니다.
코드 편집기에서 svg 아이콘을 열고 경로 태그 뒤에 클래스를 추가합니다.
<path class'colorToChange' ...
svg에 클래스를 추가하고 다음과 같이 색상을 변경할 수 있습니다.
이것은 오래된 질문이지만 최근에 같은 문제를 발견하고 서버 측에서 해결했습니다.이것은 php 고유의 답변이지만 다른 환경도 비슷한 것을 가지고 있다고 확신합니다.img 태그를 사용하는 대신 시작부터 svg를 svg로 렌더링합니다.
public static function print_svg($file){
$iconfile = new \DOMDocument();
$iconfile->load($file);
$tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
return $tag;
}
이제 파일을 렌더링하면 완전한 인라인 svg를 얻을 수 있습니다.
저는 제 svgs를 img와 svg로 했을 때 다르게 보였습니다.그래서 제 솔루션은 img를 csv로 변환하고, 내부적으로 스타일을 변경하고 다시 img로 되돌립니다(조금 더 많은 작업이 필요하지만), 저는 "blob" 또한 "mask"를 사용하여 업데이트된 답변보다 더 나은 호환성을 가지고 있다고 생각합니다.
let img = yourimgs[0];
if (img.src.includes(".svg")) {
var ajax = new XMLHttpRequest();
ajax.open("GET", img.src, true);
ajax.send();
ajax.onload = function (e) {
svg = e.target.responseText;
svgText = "";
//change your svg-string as youd like, for example
// replacing the hex color between "{fill:" and ";"
idx = svg.indexOf("{fill:");
substr = svg.substr(idx + 6);
str1 = svg.substr(0, idx + 6);
str2 = substr.substr(substr.indexOf(";"));
svgText = str1 + "#ff0000" + str2;
let blob = new Blob([svgText], { type: "image/svg+xml" });
let url = URL.createObjectURL(blob);
let image = document.createElement("img");
image.src = url;
image.addEventListener("load", () => URL.revokeObjectURL(url), {
once: true,
});
img.replaceWith(image);
};
}
단순 JS
짧은 함수를 합니다.ImgToSvg 스왑 느어왑스imgsvg 목록 수업 목록 포함)
<img src="logo.svg" onload="ImgToSvg(this)" class="logo-img"/>
const ImgToSvg= async (img) => {
const s = document.createElement('div');
s.innerHTML = await (await fetch(img.src)).text();
s.firstChild.classList = img.classList;
img.replaceWith(s.firstChild)
}.logo-img {
fill: yellow;
}<img onload="ImgToSvg(this)" class="logo-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9InN0cm9rZTojNTU1NTU1O3N0cm9rZS13aWR0aDoyIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiBmb250LWZhbWlseT0ibW9ub3NwYWNlLCBzYW5zLXNlcmlmIiBmaWxsPSIjNTU1NTU1Ij4zMDAmIzIxNTszMDA8L3RleHQ+PC9zdmc+" />
<!-- in this snippet I use dataURI in img src to avoid CORS problems witch reading svg data from external source by js -->이것은 짧은 js 기능을 제공하여 Waruyama 답변을 개선한 것입니다.
특정 경로 및/또는 색상만 변경하고 경로를 다르게 색상화하고 싶었습니다.또한 저의 경우 일부 CSS가 IMG 태그에 직접 적용되었기 때문에 포지셔닝과 정렬을 방해하지 않는 것이 오리지널 IMG 요소가 되도록 하고 싶었습니다.
https://stackoverflow.com/a/43015413/1444589, 이라는 답변에서 영감을 얻은 덕분에 저는 이렇게 할 수 있었습니다.
let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;
fetch(imgURL)
.then(response => response.text())
.then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, 'text/xml');
let svg = xmlDoc.getElementsByTagName('svg')[0];
let paths = xmlDoc.getElementsByTagName('path');
// access individual path elements directly
let leftShape = paths[0];
leftShape.setAttribute('fill', '#4F4F4F');
// or find specific color
const pathsArr = Array.from(paths);
let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
skirtShape.setAttribute('fill', '#0078D6');
// Replace old SVG with colorized SVG
// positioning and alignment is left untouched
let base64Str = btoa(new XMLSerializer().serializeToString(svg));
img.src = 'data:image/svg+xml;base64, ' + base64Str;
});
CSS를 하는 게 어때요?filter에 있는 :hover아니면 다른 어떤 주?SVG 이미지를 통해 작동합니다.img태그. 적어도 2020년에는 거의 완벽하게 지원됩니다.가장 간단한 해결책인 것 같습니다.유일한 경고는 대상 색상을 찾기 위해 필터 속성을 조정해야 한다는 것입니다.하지만 여러분은 이 매우 유용한 도구도 가지고 있습니다.
SVG를 인라인 HTML로 사용해야 합니다.
여기 로고가 있다고 해주세요.svg 코드(textEditor에서 열 때):
로고.SVG
<svg width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
<g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
<path
d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
fill="#00000" />
</g>
</svg>
원하는 클래스/ID를 추가합니다('logo-img'을 추가했습니다).
편집된 Svg
<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
...
</svg>
이제 CSS 규칙 적용:
CSS
.logo-img path {
fill: #000;
}
프로
- 이 방법으로 사용자의 작업(단, 선택,...)에 애니메이션을 만들 수 있습니다.
콘
- HTML 파일이 엉망일 것입니다.
스택 스니펫이 있습니다.
<style>
body {
display: flex;
justify-content: center;
}
.logo-img path {
transition: .5s all linear;
}
.logo-img path {
fill: coral;
}
.logo-img:hover path{
fill: darkblue;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
<g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
<path
d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
fill="#00000" />
</g>
</svg>
</body>
</html>모양이 항상 단색이고 둘 이상인 경우에는 Fontello를 사용하여 사용자 정의 SVG 모양의 전체 시리즈로 사용자 정의 아이콘 글꼴을 만들 수 있습니다.그런 다음 CSS 단독으로 모든 크기와 색상을 설정/애니메이션할 수 있습니다.
이 질문에 대한 모든 가능한 사용 사례에서, 이것은 고려해야 할 필수적인 패러다임입니다.저는 그것을 많은 프로젝트에 사용했습니다.어쨌든 폰텔로에 대해 들어본 적이 없다면, 그것에 대해 알아봐야 합니다.만약 당신이 더 나은 비슷한 해결책을 알고 있다면, 저는 알고 싶습니다.
가능한 낙하:
아이콘/모양 글꼴은 화면 판독기와 혼동되기 때문에 처리하는 데 다소 시간이 걸릴 수 있습니다.
Fontello는 모양을 가져오는 데 까다로울 수 있으며, 모양을 만들고 내보내는 데 약간의 시행착오가 필요할 수 있습니다.모든 그룹화를 피하고 중첩되지 않은 단일 복합 도형만 사용합니다.
아래와 같이 사용할 수 있는 svg fill css는 작동하지 않습니다.
<style>
svg path {
fill: red;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>
이것은 나에게 효과가 있었습니다.
언급URL : https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css
'source' 카테고리의 다른 글
| Rspec에서 단일 테스트/사양 파일을 어떻게 실행합니까? (0) | 2023.06.03 |
|---|---|
| 장치에서 현재 언어 가져오기 (0) | 2023.06.03 |
| 상수 배열 선언 (0) | 2023.06.03 |
| 어셈블리 파일 버전을 가져오는 방법 (0) | 2023.06.03 |
| JRuby에서 플로트를 소수점 두 자리로 반올림하려면 어떻게 해야 합니까? (0) | 2023.06.03 |