SVG change color 컬러 상속

agnusdei·2023년 7월 5일
0
<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 가능

0개의 댓글