Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 아이오닉 스크롤 이벤트
- 셀렉트박스 커스텀
- Oracle LISTAGG 사용 예시
- angular button
- ApexChart
- summary
- scroll
- TAILWIND
- 검색
- egov spring ajax 사용 예시
- route
- Ionic modal
- mysql if
- angular animation
- 모달
- prisma
- Angular Router
- 호버
- 스크롤 이벤트
- angular modal
- 옵저버블
- 앵귤러 모달
- angular route
- Router
- ajax 사용 예시
- 앵귤러 애니메이션
- formgroup
- flex-1
- modal
- 스크롤 이벤트 감지
Archives
- Today
- Total
깜놀하는 해므찌로
SVG change color / SVG 색상 수정 예시 본문
반응형
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
'IT' 카테고리의 다른 글
Angular 현재 URL 가져오기 router.events.pipe (0) | 2023.06.29 |
---|---|
Angulr Swiper 배경 이미지 슬라이드 활용 예시 / 슬라이드 터치 막기, 시간, 반복, 상세 설정 (0) | 2023.06.29 |
Angular font 적용하는 방법 예시 (0) | 2023.06.28 |
Tailwind media query response 예시 (0) | 2023.06.28 |
Angular Radio Component 생성 및 활용 예시 (0) | 2023.06.27 |