SVG 마스터대시보드

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> <style> .svg-circleText {font-size: 1.5rem; font-weight: bold; fill: red;} .svg-circleText tspan {display: inline-block; margin-right: 30px;} </style> <defs> <circle id="text-circle" cx="250" cy="250" r="240" stroke="blue" fill="transparent" /> </defs> <text x="20" y="20" class="svg-circleText"> <textPath href="#text-circle"> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> <tspan>My Work</tspan><tspan>My Work</tspan><tspan>My Work</tspan> </textPath> </text> </svg>위처럼 circle로 하고싶은데 나오지 않습니다. 각각 따로 하면 circle도 잘 보이고 글자도 잘 보입니다. 하지만 id와 textPath를 사용하여 연결하면 보이지 않습니다ㅠ

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요. SVG 강의를 이번에 구매하게 되면서 이제 막 준비단계를 하고 있는데요.강의에선 atom을 설치하고 emmet 패키지를 다운로드 하라고 되어있더라고요.근데 emmet을 install에 검색해도 안뜨고 구글이던 유튜브에 쳐도 emmet을 다르게 설치하는 방법이 나오지도 않고요.찾다보니 atom이 22년 12월에 종료 되었다는걸 알게 되었는데 계속 atom으로 공부해도 되는지 모르겠어요. 패키지 설치가 안되니 진도가 나가지지도 않고요 ㅜ 어떻게 해야되나요?

안녕하세요저는 데이터 시각화 개발을 하고 있는 개발자입니다.그래서 SVG에 관심이 많고 SVG를 사용해서 차트 및 그래프를 개발하고 있는데요1~2년 전만해도 라이브러리에 의존해서 개발하다가현재는 다양한 기획의도를 뒷받침 하기 위해 자체 라이브러리를 만들어 사용하고 있습니다드리고 싶은 질문은개발을 하다보니 디자인팀의 요구사항을 SVG 고유 태그만으로는 수용이 안되어 foreignObject 태그를 사용하여 html코드를 작성하여 만들고 있는데요혹시 foreignObject의 특징과 단점을 알 수 있을까요? 예를 들면 성능이 떨어진다든지 하는..기존 SVG 태그를 사용하는 것보다는 뭔가 다른 점이 있을 것 같은데 검증 자료가 딱히 없고 성능 차이도 엄청 크게 차이나지는 않는 거 같아서요..ㅠ아무튼 1분코딩님 덕분에 SVG에 대해 더 알게 되어 감사합니다.예전에 양재동코드랩 강의 하실 때 SVG, Canvas 실강으로 들어서 도움 많이 받았는데 이렇게 온라인 강의도 만들어주셔서 감사합니다.^^국내에는 SVG자료가 없다보니 이 강의는 정말 귀하네요이런 강의 더 부탁 드립니다^^감사합니다.

ㅠㅠ 지금 마스크 이용한 스토록 애니메이션 강의 보고 공부하고 있는데요,마스크 작업을 하면 아무것도 안보이게 돼요. 마스크 색상도 흰색이고 위치도 겹쳐있는데 왜 안되는걸까요?3시간째 원인을 못찾고 헤매고 있어서 코드 올립니다.. 도와주세요 ㅠ <svg width="650" height="650" viewBox="0 0 650 650" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="mask"> <path class="item" d="M149.078 226.054L190.673 352.583L237.074 227.033C237.074 227.033 218.997 233.835 203.998 233.668C188.998 233.502 180.11 223.397 149.078 226.054Z" fill="#fff"/> </mask> </defs> <g mask="url(#mask)"> <path class="over" d="M192 370.5V190.5" stroke="#B7E300" stroke-width="100"/> </g> </svg>클래스는 그냥 구분용이고 스타일 따로 없습니다!

아래 질문에 강의 노션 공유에 관한 질문 반복입니다! 노션은 다음 이미지의 노션 링크 말하는 것 같습니다. 혹시 공유 가능하신가요?

혹시, 강의 노션을 공유 받을 수 있을까요?

안녕하세요.   강의를 잘 보던 중 [마스크 2] 강의에서 질문이 있어 글을 씁니다!   배경 패턴에 윙크하는 애니메이션을 적용하였는데, 해당 애니메이션이 마우스가 움직일때만 동작합니다.   즉, 마우스가 멈춰있으면 애니메이션도 정지되고 마우스를 움직이면 다시 애니메이션이 진행됩니다. 그리고 약간 끊기는 것처럼 보이기도 합니다.   제가 강의를 보며 따라 만든 파일과 올려주신 html 파일 모두 동일한 현상이 발생합니다.   정상적인 동작인것인지 궁금합니다. 아니라면, 마우스가 멈춰있어도 배경의 애니메이션이 계속 진행되도록 처리하려면 어떻게 할 수 있을까요?   감사합니다.  

강의 예시처럼 rect로는 해보았는데 path로 된 svg를 x ,y축으로 이동시키고 싶다면 animate 태그로는 할 수 없는건가요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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> <!-- 홍길동 인스타그램 링크 //-->

안녕하세요? 돋보기 예제라고 해서 따라해 보았으나 마스크로 서클 이외의 부분은 안보이게 하고 돋보기가 지나가는곳만 보여지는데 이는 구멍 뚫린 부분만 보여지는 것이지 돋보기는 아닌것 같아서요~ 아 물론 강의는 흥미롭게 잘 따라했습니다!   응용해서 마스크 안씌우고 패턴이 전체화면에 보이는 상태에서 돋보기가 지나가면 뚫린 부분의 패턴부분은 크게 보여지는걸 해보려고 하는데 마스크 영역을 통해서 보여지는 부분만 크게 보여지게 하는 방법이 있는지 아니면 패턴을 두번을 깔아서 마스크 부분에만 큰 패턴을 보여줄수 있는지 궁금합니다.   아 그리고 눈 움직이는 애니메이션은 마우스를 멈추면 계속 반복되지 않는데 이유가 뭘까요?

안녕하세요 만약 웹팩같은 빌드패키지를 통해서 uglyfy, minifying 등이 진행된다고 하면 따로 압축과정이 필요없을거같은데 그렇게 생각해도 될까요?

안녕하세요 일러스트에서 펜툴으로 다 따서 svg로 구현하고 웹으로 불러오니 가려지지 않고 폰트 적용이 되지 않고 이렇게 되던데 .. 이건 어떻게 해야할까요? 구글웹폰트 다운받아서 썼고요 일러스트에서 쓰는건 문제가 없었습니다.미리 감사드려요  요.

  안녕하세요 ~ 강의 너무 잘 듣고 있습니다 ~다름이 아니오라 제가 쓴 태그가 안먹히는데 어떤 오타가 있는걸까요? 제가 여러번 확인해봤는데 잘 되지 않아서 글 남깁니다. 항상 좋은 강의 감사드립니다!  

맥북을 사용하고 있는데 제 컴퓨터 에서는 텍스트 애니메이션이 잘 작동하지만 윈도우로 봤을때에는 폰트적용이 안되고 깨진듯이 나옵니다. 폰트 적용법 알수있을까요!

smil 애니메이션은 무한 반복 재생 할수 없나요?

안녕하세요! 강의를 들은지는 시간이 조금 지났지만 막상 적용하려다보니 잘 안되서 필요한 부분만 다시 듣는 중에 질문드립니다. 질문 : 하나의 도형이나 패스 안에 <animate> 두개를 사용하는 방법은 없을까요? 예를 들어 도형의 모양과 색상을 동시에 변형하고 싶은데 <animate> 태그 안에는 attributeName 속성이 하나밖에 들어가지 않는 것 같아서 질문드렸습니다. 감사합니다. ps 그리고 혹시 인터렉티브 웹 디자인이나 자바스크립트를 배우는데 있어서 참고가 될 만한 사이트(들)가 있다면 알려주실 수 있으신지도 부탁드립니다. (독해 가능한 언어는 한국어, 영어, 일본어입니다.)  강의에서 종종 언급되었던 모질라재단이나 어워즈, 그리고 스튜디오밀 등의 사이트는 큰 도움이 되었습니다.  그럼 좋은 하루 되세요! ------------------------------------ 안녕하세요! 아직 이전 질문에 답변을 해주시지는 않았지만 추가로 질문이 있어서 이전 질문에 추가로 작성하였습니다. 유튜브 채널에 있는 '캔버스로 융의 땅 만들기' 중에 질문사항이 생겼는데요, 해당 작업에서 class Light / class Lines/ class Particles 의 경우 constructor외부에서 메소드 draw() 를 선언(?)하고 있는데 왜 유독 class Characters의 constructor 안에서만는 this.setAction() 이라는 메소드가 포함되어 있는지 궁금해서 질문드립니다. constructor 내부에 this.함수() 가 포함되는 경우 그건 곧 새로운 인스턴스가 생성되는 순간 해당 this.함수() 를 호출한다는 의미가 되는걸까요? 아니면 호출이 아니라 단순 선언이 되는건지 잘 모르겠습니다. 어차피 requestAnimationFrame 으로 실행될때마다 new Character의 메소드 draw() 가 실행되는거라면 cm.context.drawImage() 와 마찬가지로 setAction() 메소드도 draw() 내부에 포함되서 실행시켜도 되지 않나요? constructor 안에 메소드를 포함시킴으로서 기대되는 효과가 있는지 궁금합니다.  (혹시 setZOrder시 배열 참조에서 문제가 발생하기 떄문일까요? 하튼 잘 모르겠습니다)   첫번째 SMIL <animate> 관련 질문, 그리고 constructor 내부에 메소드를 선언(?) 하는 효과에 대한 질문 - 두가지 모두에 대해서 사실 직접 찾아볼 예정이긴 하지만 혹시나 하는 마음에 질문 남겼습니다. 뭔가 영화 인셉션처럼 꿈속의 꿈속의 꿈으로 들어와있는 느낌이라서 질문 자체가 애매한것같은데, 결국 여기에서 물어보는게 맞다고 판단했습니다. 그리고 질문과는 관계없이, 좋은 강의 만들어주셔서 정말 감사드립니다! 앞으로도 계속해서 업데이트 부탁드리겠습니다.   

인터랙티브  제대로 시작 강의 하실때는 - 쓰시고 이 강의에서는 __ 를 사용하시길래 궁금해서 여쭤봅니다. 그리고 1분코딩 강사님께서 쓰시는 클래스 네이밍 방법 있으시면 유튜브 라이브나 강의업로드 해주시면 좋을꺼 같아요! 

몇가지궁금한 사항이 있습니다. 1. 패턴으로 그냥 반복되지 않고 그냥 일반 이미지를 삽입할수 있나요? 패턴 태그안에 <image> 태그를 사용해봤는데 제가 생각한대로는 안되어서요. 2. 혹시 돋보기로 보면서 클릭을 했을때 마스킹 되어서 보여지는 #pattern-bg의 각각의 값에 고유한 링크를 걸어서 다른 페이지로 이동할수 있게끔 구현이 가능한지 여쭤보고 싶습니다.  고유의 정보를 보여지게끔  만드는 구현이 가능한지 어떻게 하는건지 조금만 가르쳐주세요~ 3. rect(.bg) 돋보기 바깥영역의 색깔은 지정이 가능한가요? 현재 저희는 #pattern-bg를 fill값으로 쓰고 있어서 어떻게 처리해야 백그라운드 색깔을 바꿀수 있는지 궁금합니다. 

강의와 관련 있을지 모르겠지만 그래도 질문 남겨봅니다.. svg가 viewport에 의해서 크기가 조절되기 때문에 데스크탑 화면에서 꽉차던게 모바일환경에서는 크기가 줄어들어 버립니다. ex)  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 450">             <path d="M650 0 L650 450" />         </svg> 저는 데스크탑,모바일 둘다 화면에 꽉 채우고 싶은데 어떻게 해야하나요?