svg 에서 currentColor 가 안먹히네요 채택완료

6년 전 조회 2,102

 

안녕하세요 svg에 대해 좀 여쭤볼께요

 

- HTML -

<style>

div.raider{color:#f00;}

</style>

<div class="raider">

    <img src="img/raider_line.svg" width="40" height"40">

</div>

 

 

- SVG -

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">

<path stroke="currentColor" fill="none" d="M12 18.684c-3.87 0-7-3.075-7-6.877C5 8.005 8.13 4.93 12 4.93s7 3.075 7 6.877c0 3.802-3.13 6.877-7 6.877zm8.94-7.86c-.46-4.096-3.77-7.348-7.94-7.8V1h-2v2.024c-4.17.452-7.48 3.704-7.94 7.8H1v1.965h2.06c.46 4.097 3.77 7.35 7.94 7.801v2.024h2V20.59c4.17-.452 7.48-3.704 7.94-7.8H23v-1.965h-2.06zM12 7.878c-2.21 0-4 1.759-4 3.93 0 2.171 1.79 3.93 4 3.93s4-1.759 4-3.93c0-2.171-1.79-3.93-4-3.93z"/>

</svg>

 

이렇게 했는데요 stroke 색상이 안바뀝니다.

어떻게 해야 되나요?  도와주이소~

답변 1개

채택된 답변
+20 포인트

다음처럼 하면 잘 적용되네요.

<div class="raider">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path stroke="currentColor" fill="none" d="M12 18.684c-3.87 0-7-3.075-7-6.877C5 8.005 8.13 4.93 12 4.93s7 3.075 7 6.877c0 3.802-3.13 6.877-7 6.877zm8.94-7.86c-.46-4.096-3.77-7.348-7.94-7.8V1h-2v2.024c-4.17.452-7.48 3.704-7.94 7.8H1v1.965h2.06c.46 4.097 3.77 7.35 7.94 7.801v2.024h2V20.59c4.17-.452 7.48-3.704 7.94-7.8H23v-1.965h-2.06zM12 7.878c-2.21 0-4 1.759-4 3.93 0 2.171 1.79 3.93 4 3.93s4-1.759 4-3.93c0-2.171-1.79-3.93-4-3.93z"/>
    </svg>                
</div>    

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

<img src="...svg"> 이렇게 사용하면 적용이 안되는거군요.
감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고