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
- angular route
- Router
- 호버
- prisma
- angular animation
- route
- ajax 사용 예시
- TAILWIND
- modal
- Angular Router
- 셀렉트박스 커스텀
- 검색
- angular modal
- 아이오닉 스크롤 이벤트
- summary
- 모달
- formgroup
- Ionic modal
- 앵귤러 애니메이션
- mysql if
- egov spring ajax 사용 예시
- Oracle LISTAGG 사용 예시
- 스크롤 이벤트
- flex-1
- 옵저버블
- ApexChart
- 앵귤러 모달
- 스크롤 이벤트 감지
- angular button
- scroll
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 |