깜놀하는 해므찌로

SVG change color / SVG 색상 수정 예시 본문

IT

SVG change color / SVG 색상 수정 예시

agnusdei1207 2023. 6. 29. 12:17
반응형
SMALL
<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_410_5022)">
<path d="M3.875 14.25H36.375" stroke-opacity="1" stroke="currentColor" stroke-opacity="0.4" stroke-width="2.08333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.125 34.25H3.875V6.75H36.375V34.25H29.125C29.5 34.125 29.875 34.125 30.25 34.125C30.375 33.375 30.5 32.5 30.5 31.75C30.5 30.875 30.375 30.125 30.25 29.375C29 29.5 27.75 29 27.125 27.75C26.5 26.625 26.625 25.25 27.375 24.25C26.25 23.125 24.75 22.25 23.125 21.75C22.625 22.875 21.5 23.75 20.125 23.75C18.75 23.75 17.625 22.875 17.125 21.75C15.5 22.25 14.125 23.125 12.875 24.25C13.625 25.25 13.75 26.625 13.125 27.75C12.5 28.875 11.125 29.5 10 29.375C9.875 30.125 9.75 31 9.75 31.75C9.75 32.625 9.875 33.375 10 34.125C10.375 34.125 10.75 34.125 11.125 34.25Z" stroke="currentColor" stroke-opacity="0.4" stroke-width="2.08333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.125 35.5C22.1961 35.5 23.875 33.8211 23.875 31.75C23.875 29.6789 22.1961 28 20.125 28C18.0539 28 16.375 29.6789 16.375 31.75C16.375 33.8211 18.0539 35.5 20.125 35.5Z" stroke="currentColor" stroke-opacity="0.4" stroke-width="2.08333" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_410_5022">
<rect width="40" height="40" fill="currentColor" transform="translate(0.125 0.5)"/>
</clipPath>
</defs>
</svg>

1. svg 태그에 fill = 'none' 부분을 제외하고 자식 태그들의 fill, stroke 속성의  값을 currentColor 로 지정하게 되면

부무태그의 색상을 그대로 가져와서 override 하게 됩니다.

2. opacity, stroke-opacity = 1 투명도 1로 설정해야 color overide 가능 

반응형
LIST