같은 페이지에 같은 svg 아이콘을 사용할 경우 id 값이 동일해도 되나요?
363
seonup952182
5 asked
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요.
한 페이지 안에 동일한 svg 아이콘을 여러개 사용하고자 할 때, 그라디언트 스타일 등 동일한 디자인이 들어가면 id값을 똑같이 사용해도 되는지, 아니면 다 다르게 줘야 하는지 궁금합니다.
예를 들어, 아래 예시 코드처럼 아무개와 홍길동의 인스타그램 링크를 연결하고 동일한 인스타그램 아이콘을 svg로 붙이고 싶습니다.
이때 인스타그램 아이콘을 아무개와 홍길동 각각에 svg 코드를 가져와서 그냥 붙이면, <radialGradient>에 "a"라는 동일한 id 값이 생성됩니다.
그럼 한 페이지에 id="a"는 두 번 선언 됩니다.
이럴 경우, 인스타그램 아이콘 id값을 전부 다르게 변경해야 하나요?
(예시 코드가 너무 길어 죄송합니다.. 인스타그램 아이콘을 들고왔더니 말씀주신대로 압축을 했는데도 코드가 복잡하네요ㅠㅠ)
<!-- 아무개 인스타그램 링크 -->
<a href="/">
<svg class="instagram1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65.23" height="65.23">
<defs>
<radialGradient id="a" cx="-1.129" cy="4.694" r="7.676" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ffd879"/>
<stop offset=".1" stop-color="#ffd879"/>
<stop offset=".15" stop-color="#fccb76"/>
<stop offset=".26" stop-color="#f5aa6c"/>
<stop offset=".4" stop-color="#e9755e"/>
<stop offset=".45" stop-color="#e45f58"/>
<stop offset=".68" stop-color="#d22a9c"/>
<stop offset="1" stop-color="#6968df"/>
</radialGradient>
<radialGradient id="d" cx="-.097" cy="2.149" r="2.993" xlink:href="#a"/>
<radialGradient id="f" cx=".222" cy="1.228" r="1.325" xlink:href="#a"/>
<clipPath id="b">
<path data-name="패스 490" d="M27.49 32.67a5.59 5.59 0 1 0 11.18.02v-.01a5.589 5.589 0 0 0-5.58-5.59h-.01a5.59 5.59 0 0 0-5.59 5.58" fill="none"/>
</clipPath>
<clipPath id="c">
<path data-name="패스 491" d="M23.79 32.72a9.29 9.29 0 1 1 18.58-.02v.02A9.289 9.289 0 0 1 33.09 42h-.01a9.289 9.289 0 0 1-9.29-9.28m15.58-9.43a2.36 2.36 0 1 1 2.36 2.32v.04a2.36 2.36 0 0 1-2.36-2.36m-1.29-4.92H27.15a8.78 8.78 0 0 0-8.78 8.78v10.93a8.78 8.78 0 0 0 8.78 8.78h10.93a8.77 8.77 0 0 0 8.77-8.77V27.15a8.769 8.769 0 0 0-8.76-8.78h-.01" fill="none"/>
</clipPath>
<clipPath id="e">
<path data-name="패스 492" d="M15 39.38V25.85A10.86 10.86 0 0 1 25.85 15h13.53a10.86 10.86 0 0 1 10.86 10.85v13.53a10.86 10.86 0 0 1-10.86 10.86H25.85A10.86 10.86 0 0 1 15 39.38M13.4 0A13.4 13.4 0 0 0 0 13.4v38.43a13.4 13.4 0 0 0 13.4 13.4h38.43a13.4 13.4 0 0 0 13.4-13.4V13.4A13.4 13.4 0 0 0 51.83 0Z" fill="none"/>
</clipPath>
</defs>
<g data-name="그룹 82">
<g data-name="그룹 81" clip-path="url(#b)">
<path data-name="사각형 125" transform="translate(27.484 27.09)" fill="url(#a)" d="M0 0h11.186v11.186H0z"/>
</g>
</g>
<g data-name="그룹 84">
<g data-name="그룹 83" clip-path="url(#c)">
<path data-name="사각형 126" transform="translate(18.37 18.37)" fill="url(#d)" d="M0 0h28.486v28.49H0z"/>
</g>
</g>
<g data-name="그룹 86">
<g data-name="그룹 85" clip-path="url(#e)">
<path data-name="사각형 127" fill="url(#f)" d="M0 0h65.23v65.23H0z"/>
</g>
</g>
</svg>
<p>아무개</p>
</a>
<!-- 아무개 인스타그램 링크 //-->
<!-- 홍길동 인스타그램 링크 -->
<a href="/">
<svg class="instagram2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65.23" height="65.23">
<defs>
<radialGradient id="a" cx="-1.129" cy="4.694" r="7.676" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ffd879"/>
<stop offset=".1" stop-color="#ffd879"/>
<stop offset=".15" stop-color="#fccb76"/>
<stop offset=".26" stop-color="#f5aa6c"/>
<stop offset=".4" stop-color="#e9755e"/>
<stop offset=".45" stop-color="#e45f58"/>
<stop offset=".68" stop-color="#d22a9c"/>
<stop offset="1" stop-color="#6968df"/>
</radialGradient>
<radialGradient id="d" cx="-.097" cy="2.149" r="2.993" xlink:href="#a"/>
<radialGradient id="f" cx=".222" cy="1.228" r="1.325" xlink:href="#a"/>
<clipPath id="b">
<path data-name="패스 490" d="M27.49 32.67a5.59 5.59 0 1 0 11.18.02v-.01a5.589 5.589 0 0 0-5.58-5.59h-.01a5.59 5.59 0 0 0-5.59 5.58" fill="none"/>
</clipPath>
<clipPath id="c">
<path data-name="패스 491" d="M23.79 32.72a9.29 9.29 0 1 1 18.58-.02v.02A9.289 9.289 0 0 1 33.09 42h-.01a9.289 9.289 0 0 1-9.29-9.28m15.58-9.43a2.36 2.36 0 1 1 2.36 2.32v.04a2.36 2.36 0 0 1-2.36-2.36m-1.29-4.92H27.15a8.78 8.78 0 0 0-8.78 8.78v10.93a8.78 8.78 0 0 0 8.78 8.78h10.93a8.77 8.77 0 0 0 8.77-8.77V27.15a8.769 8.769 0 0 0-8.76-8.78h-.01" fill="none"/>
</clipPath>
<clipPath id="e">
<path data-name="패스 492" d="M15 39.38V25.85A10.86 10.86 0 0 1 25.85 15h13.53a10.86 10.86 0 0 1 10.86 10.85v13.53a10.86 10.86 0 0 1-10.86 10.86H25.85A10.86 10.86 0 0 1 15 39.38M13.4 0A13.4 13.4 0 0 0 0 13.4v38.43a13.4 13.4 0 0 0 13.4 13.4h38.43a13.4 13.4 0 0 0 13.4-13.4V13.4A13.4 13.4 0 0 0 51.83 0Z" fill="none"/>
</clipPath>
</defs>
<g data-name="그룹 82">
<g data-name="그룹 81" clip-path="url(#b)">
<path data-name="사각형 125" transform="translate(27.484 27.09)" fill="url(#a)" d="M0 0h11.186v11.186H0z"/>
</g>
</g>
<g data-name="그룹 84">
<g data-name="그룹 83" clip-path="url(#c)">
<path data-name="사각형 126" transform="translate(18.37 18.37)" fill="url(#d)" d="M0 0h28.486v28.49H0z"/>
</g>
</g>
<g data-name="그룹 86">
<g data-name="그룹 85" clip-path="url(#e)">
<path data-name="사각형 127" fill="url(#f)" d="M0 0h65.23v65.23H0z"/>
</g>
</g>
</svg>
<p>홍길동</p>
</a>
<!-- 홍길동 인스타그램 링크 //-->
HTML/CSS
svg
Answer 1
1
기본적으로 id 속성은 한 페이지 내에서 한 번만 넣어주셔야 합니다~
그래서 뭔가 세트 느낌으로 id를 만들어야 할 때는, 보통 뒤에 번호를 붙여줍니다.
스크립트를 이용해 자동으로 처리해주면 더 편리하겠지요~
svg 직접 그리기
0
59
1
SVG 파일 CSS 애니메이션
0
215
1
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?
0
585
1
atom 서비스 종료, emmet 설치안됨
0
1426
1
SVG 태그 중 foreignObject 관련하여 질문드립니다.
0
1565
1
마스크가 안돼요..
0
431
2
강의 노션
0
404
1
강의 노션
0
342
1
마스크 2에서 배경으로 깔린 패턴 애니메이션이 멈춰있는 현상
1
238
1
path 를 x ,y로 이동
0
287
1
마스크2 돋보기 질문
0
391
1
압축에 관하여
0
281
1
svg 강의 스트로크 편 구현 에서 제가 적용하면 안되는게 있어요
0
418
2
패스 강의 관련 태그 질문 드립니다 ㅠ.ㅠ
0
514
1
글씨 깨짐
0
434
1
smil 무한반복 질문
0
236
1
SMIL 애니메이션 중복 관련 질문드립니다. ( + 융의 땅 관련 질문 추가...)
0
335
1
class name 정의 하실때 bem 방법 사용하시나요??
0
332
1
마스크 2 에서 질문있습니다.
0
265
1
path로 그린 svg 화면 꽉채우기
0
883
1
svg 파일 불러오기
0
369
1
svg 태그 질문!
0
235
1
질문드립니다.
0
250
1