svg 에서 currentColor 가 안먹히네요
본문
안녕하세요 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
다음처럼 하면 잘 적용되네요.
<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>
<img src="...svg"> 이렇게 사용하면 적용이 안되는거군요.
감사합니다.
