를 통해로드 :변경 채우기 색 배경 이미지
.icon {
background-image: url('icon.svg');
}
어떻게 내가 그 아이콘 또는 전체 아이콘 자체 내부 모양의 색상을 채울 변경할 수 있습니다 ?
감사합니다.
를 통해로드 :변경 채우기 색 배경 이미지
.icon {
background-image: url('icon.svg');
}
어떻게 내가 그 아이콘 또는 전체 아이콘 자체 내부 모양의 색상을 채울 변경할 수 있습니다 ?
감사합니다.
내가 원하는 것은 재사용 가능한 아이콘을 검은 색으로 만 정의하고 CSS로 그 색을 변경하는 것입니다. 동일한 아이콘을 여러 색상으로 정의하는 것을 건너 뛰고 싶습니다. –
하지만 SVG이므로 CSS를 통해 내부 아트웍 속성을 제어 할 수 없습니다. 색상을 변경 한 다음 다시 저장하거나 XML 편집기에서 열고 색상을 편집 한 다음 저장하려면 SVG 편집기가 있어야합니다. # @GoranRadulovic – Nitesh
그건 내가 두려워했던 것이지만, 내가 원하는 것을 할 수있는 방법이나 해킹이 있기를 바랬습니다. 나는 CSS 마스크에 대해 읽었지만 지원되지 않기 때문에 사용할 수 없다. –
또는 시도 동적으로 수행하려는 경우 :이 불가능
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+")";
. svg 파일을 문서에 직접로드하거나 '
감사! 나는 내가 원했던 것을 성취 할 수 없다는 인상을 받았지만, 확실히 알 필요가 있었다. –