SVG

Scalable Vector Graphics 의 약자로 벡터 그래픽이다.
벡터란 무엇인가! 크기를 줄이거나 늘려도 픽셀이 깨지지않고 용량이 작은 이미지 형식이다.
기존에 단순한 아이콘들을 png로 사용했는데 이번기회에 svg를 사용해볼까 하다가 시작한 삽질

뭘 하고 싶은데?

1. hover 시 색깔 변경
2. click 이벤트 반영
3. 단, object 를 이용하여

해보자

일단 hover 색깔부터! svg 코드 안에 css 넣어주면 완성!

<svg width="20" height="30" viewBox="0 0 20 30" xmlns="http://www.w3.org/2000/svg">
    <style>
        :hover { stroke: blue }
    </style>
    <path d="M14 27 2 15 14 3" stroke="#BBB" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

그런데 정확히 path에 마우스를 올려야만 색깔이 바뀌는 문제 발생!
svg 안에서 a태그로 감싸봤지만 똑같은 상황.. fill을 transparent로 바꿔주어도 내가 원하는 만큼의 영역이 클릭영역으로 잡히지않는다.
어차피 a태그 쓸거니까 a로 감싸고 css수정

  <style>
    .svg:hover path {stroke:blue}
  </style>
  <a href="">
    <svg width="20" height="30" viewBox="0 0 20 30" xmlns="http://www.w3.org/2000/svg" class="svg">
        <path d="M14 27 2 15 14 3" stroke="#BBB" stroke-width="3" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </a>

이제 해당 코드가 중복으로 사용되니까 object 태그를 사용하고싶은 나새끼..
그치만 object로 넣는순간 상위 요소에서 하위요소 제어가 안되서 몇시간을 삽질해도 실패해부러따...
누구 아시는분......