svg를 컴포넌트로 만들어서 화면에 그려내야 했다.
이런식으로 svg를 불러와서 로고를 그려내고 싶었다.
위 코드대로라면
첫번째 줄에 하나로고/우리로고
두번째 줄에 롯데로고/롯데로고가 나와야했다.
하지만 역시나 잘 되지 않는다..
(리액트를 시작하고 되는일이 하나도 없어)
따란..!
이렇게 하나은행이 4개가 나왔다.
이게 순서를 바꿔도 하나은행이 나오냐?
아니다.
무조건 첫번째 있는 놈에 따라 뒤에 것들이 모두 바뀌어버렸다..
결과적으로는 무엇이 문제냐
이건 하나은행 로고 svg이다.
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="18.5" cy="18.5" r="18.5" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_423_577" transform="scale(0.0149254)"/>
</pattern>
<image id="image0_423_577" width="67" height="67" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
이건 우리은행 로고 svg이다.
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M37 18.5001C37 28.7173 28.7173 37.0001 18.5 37.0001C8.28273 37.0001 0 28.7173 0 18.5001C0 8.2828 8.28273 6.4622e-05 18.5 6.4622e-05C28.7173 6.4622e-05 37 8.2828 37 18.5001Z" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_423_583" transform="translate(-0.00833333) scale(0.0166667)"/>
</pattern>
<image id="image0_423_583" width="61" height="60" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
두 코드에서 중요하게 봐야하는 것은 pattern의 id이다.
두 id가 같다.
이 아이디가 같으면 같은 이미지를 보여준다-다른 크루의 도움을 받았다-고 한다.
그래서 얼른 바꾸어보았다.
단순하게 pattern0 > pattern1 이런식으로..
그러면 되냐?
안된다..
안되서 슬픔에 빠졌다.
이번엔 나타나지도 않고 그냥 "무"가 되었다.
무엇 하나 뜨지 않고 사라졌다.
왜 알려줘도 못하니..
그래서 svg를 뜯어보았다.
그랬더니 눈에 익은 무언가가 보인다.
"url(#pattern0)"
우리가 css를 할 때 id를 #으로 표현한다. 생긴것도 똑같다.
설마하고 이걸 바꾸면..?
네.. 정답.!
<path>의 마지막에 적혀있는 이 url은 이 id로 찾는 것이었나보다.
그래서 id만 바꾸면 이 경로가 사라졌으니 그냥 없어져버리는 거다.
그치만 크기는 지정되어 있으니 공간은 그대로이고.
아무튼 결과적으로
만약 한 화면에서 여러 svg를 쓴다면
<pattern>의 id가 같은지 꼭 확인해보시길 바랍니다.
'틀리면서 배우는 코딩' 카테고리의 다른 글
[ErrorBoundary] ErrorBoundary하는데 자꾸 Uncaught runtime errors가 발생해요 (0) | 2023.05.31 |
---|---|
[CSS] first-child/last-child가 안먹혀요 (0) | 2023.05.17 |
[REACT] svg import했는데 오류가 뜬다. (0) | 2023.04.28 |
[REACT] 한 함수 내에서 setState를 여러번 호출한다면 적용이 안됩니다. (0) | 2023.04.26 |
[Map/Object] Map과 Object의 key, value 다루기 및 차이점 (1) | 2023.03.05 |