snap.svg에 대한 내성-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

snap.svg에 대한 내성

Lisa Kudrow

Feb 20, 2025 pm 12:13 PM

An Introdution to Snap.svg

snap.svg에 대한 내성 키 테이크 아웃

Snap.svg는 스케일블 벡터 그래픽 (SVG)으로 작업하도록 특별히 설계된 강력하고 유연한 라이브러리로 마스킹, 클리핑, 패턴, 그라디언트 등과 같은 기능을 제공합니다. snap.svg는 개발자가 Snap.svg로 생성 된 기존 SVG 컨텐츠와 SVG 컨텐츠를 모두 애니메이션하고 조작 할 수 있으며 모든 최신 브라우저와 호환됩니다. snap.svg는 저수준 라이브러리이며, 아직 차트 나 데이터 바인딩을 지원하지는 않지만 복잡한 애니메이션과 대화식 SVG 컨텐츠를 작성하는 데 이상적입니다. SVG 요소는 Snap.svg로 그룹화하여 공통 변환 및 이벤트 처리를 그룹의 모든 요소에보다 쉽게 적용 할 수 있습니다. Snap.svg는 그라디언트, 패턴 및 클리핑 경로를 포함한 대부분의 SVG 기능을 지원하며 모든 최신 브라우저와 호환됩니다. 그러나 일부 SVG 기능은 이전 브라우저에서 완전히 지원되지 않을 수 있습니다.

SVG는 10 년 넘게 주변에 있었지만 지난 몇 년 동안 개발자가 아름다운 차트와 그림을 쉽게 이용할 수있는 훌륭한 도서관 덕분에 웹 응용 프로그램에서 차트를 그리는 방법으로 인기를 얻었습니다. 차트의 특정 D3.JS 및 멋진 SVG 도면 및 애니메이션의 경우 Raphaël. 새로운 뛰어난 도서관은 최근에 떠오르고있다. 그들은 프론트 엔드 개발자와 디자이너에게 새로운 접근 방식과 놀라운 새로운 기능을 제공합니다.

pathsjs는 SVG 기반 차트 생성을위한 최소 라이브러리입니다. 템플릿 엔진과 함께 사용할 수있는 SVG 경로를 생성하여 반응 형 프로그래밍을 지원하도록 설계되었습니다. Ractive와 같은 콧수염 기반 템플릿 엔진에서 가장 잘 작동합니다. SVG 기반은 아니지만 P5는 언급 할 가치가 있습니다. HTML5 캔버스 요소에 영향을 미치는 전통적인 문제를 극복하려는 시도, 특히 상호 작용.
이 기사의 나머지 부분에서, 우리는 기본부터 시작하여 Snap.svg를 잘 살펴볼 것입니다. raphaël
Raphaël을 살펴볼 기회가 없다면 아마해야 할 것입니다. Dmitry Baranovskiy가 솔로 프로젝트로 만든 멋진 자바 스크립트입니다. 개인 프로젝트로 시작되었지만 결과는 인터페이스 (매우 명확하고 일관된), 성능 및 모양 (특히 애니메이션)의 경우 놀라운 일입니다. 라이브러리는 차트보다는 "프리 핸드"드로잉 및 애니메이션을 향한 지향적입니다. Graphaël Extension은 나중에이 문제를 해결하기 위해 출시되었지만 D3만큼 인기가없고 널리 퍼져 있지 않았습니다. 다른 도서관보다 앞서 있었음에도 불구하고 Raphaël은 한계를 보여주기 시작했습니다. 예를 들어, 구형 브라우저와 호환 되려면 Raphaël은 애니메이션을 돋보이게하는 멋진 새로운 SVG 기능을 모두 지원하지 않습니다. 저자가 새로운 프로젝트 인 Snap.svg로 Fresh를 시작하기로 결정한 이유는 물론 Raphaël 디자인을 모은 경험의 혜택을 얻었습니다. Snap.svg는 또한 과거와 함께 중단되어 완전히 새로운 종류의 특수 효과를 도입 할 수 있습니다. 오, 스냅! Snap의 구문을 탐구하고 몇 가지 예를 시작하기 전에이 새로운 라이브러리의 장단점을 신속하게 검토해 봅시다 : .
프로 :
위에서 언급 한 모든 멋진 기능을 지원합니다 스냅은 기존 SVG를 감싸고 애니메이션 할 수 있습니다. Adobe Illustrator, Inkscape 또는 Sketch와 같은 도구로 SVG를 생성하거나 SVG의 STRING을 비동기 적으로로드하고 SVG 파일을 스프라이트로 바꾸는 데 필요한 조각을 쿼리 할 수 있습니다.
. 는 무료이며 오픈 소스입니다.

단점 :
는 저수준 라이브러리이므로 데이터를 시각화 해야하는 경우 불행히도 아직 차트에 대한 지원이 없습니다.
. 데이터 바인딩에 대한 지원이 없습니다 SNAP는 아직 완전한 성숙도에 도달하지 못한 젊은 프로젝트입니다. 이미 개인 프로젝트에 사용하는 것이 좋지만 복잡한 프로젝트에서 사용하기 전에이 측면을 가중시켜야합니다.
.
우리가 언급했듯이 Snap은 이전 브라우저에서 지원하지 않는 기능을 사용합니다. 완전하고 업데이트 된 호환성 테이블은 아직 제공되지 않지만이 라이브러리는 다음 브라우저 버전 (및 새로운)에서 최소한 잘 작동해야합니다.
Firefox esr 18 <.> 즉 9.0.8 크롬 29 오페라 24

스냅을 시작하는 github 저장소에서 소스 파일을 다운로드 한 후, 내장 배포 파일이 포함 된 Dist Folder를 감동시키고 Dist Folder를 찾을 수 있습니다. Grunt를 사용하여 Snap을 구축하거나 최신 버전을 확인하는 방법에 대한 자세한 지침은 여기를 참조하십시오. . 새 프로젝트의 JS 폴더 내부에 미니스트 버전의 파일을 복사 한 후에는 HTML 페이지에 스크립트를 포함하십시오. 프로젝트의 루트 디렉토리에 있다고 가정하면 페이지의 마감 바디 태그 직전 에이 줄을 추가 할 수 있습니다.

이제 우리는 벡터 그래픽을위한 드로잉 영역을 만들 준비가되었습니다. 이를 수행하는 두 가지 방법이 있습니다 :

새로운 드로잉 표면을 만들면 페이지의 DOM (내부)에 추가됩니다. 기존 DOM 요소를 재사용하고 스냅 구조로 감습니다. 모든 요소를 감쌀 수 있지만 드로잉 메소드에는 SVG 요소가 필요합니다.

첫 번째 방법을 사용하면 JavaScript 코드에서 생성시 표면적의 너비와 높이를 명시 적으로 설정할 수 있습니다. 프레젠테이션과 콘텐츠 사이의 더 큰 수준의 분리를 달성하려면 CSS 규칙의 값을 지정하여 두 번째 방법을 사용할 수 있습니다. 높은 수준에서 첫 번째 방법을 사용하면 드로잉 표면의 모양을 동적으로 조정할 수 있지만, 필요하지 않은 경우 두 번째 방법은 MVC를 준수합니다. 또한 포장은 소개 섹션에서 언급 된 것처럼 외부 도구로 생성 된 SVG 도면을 가져오고 수정할 수 있습니다. 예를 들어, 새로운 800 x 600 픽셀 드로잉 영역을 만들려면 다음 줄의 JavaScript 만 있으면됩니다.

대신 기존의 것을 감싸고 싶다면 #complexsvgfromillustrator :

도면 표면을 가져 오려면 여전히 JavaScript 한 줄로 도망 갈 수 있습니다.

사이드 참고 : 호기심 많은 독자의 경우 : 생성 후 스냅 객체를 검사하면 종이 필드가있는 것을 알 수 있습니다. 모양 우리가 드로잉 표면 인 스냅 포 래퍼를 만들면 몇 가지 모양을 그릴 때입니다. 원을 그리고 싶다고 가정 해 봅시다 :

문서에서 볼 수 있듯이 Circle () 메소드의 첫 두 매개 변수는 중앙의 좌표이고 세 번째 매개 변수는 원의 반경입니다. 이러한 모든 매개 변수는 필수이며, 제공하지 않으면 오류가 발생합니다. Circle () 메소드는 다른 모든 도면 메소드와 마찬가지로 객체에 대한 참조를 반환합니다. 다음 코드 샘플과 같이 타원도 그릴 수 있습니다. 이번에는 수직 및 수평 반경이 필요합니다. 다시, 모든 매개 변수는 필수입니다

사각형을 그려 보려면 다음 코드를 사용하십시오. 이렇게하면 왼쪽 상단 코너가 (100px, 100px), 너비 200px 및 200px 높이가있는 사각형이 생성됩니다.

rect () 메소드에 대한 멋진 점은 수직 및 수평 축에 대해 독립적으로 둥근 모서리의 반경을 제어하는 두 가지 옵션 매개 변수를 허용한다는 것입니다. 이 매개 변수는 통과하지 않으면 기본값을 0으로 기본값이지만, 하나 (수평 반경) 만 통과하면 두 번째는 0으로 설정되지 않지만 둘 다 동일한 값을 가정합니다.

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

이제 처음부터 시작하려면 다른 드로잉 표면을 만들거나 종이 () 메소드를 사용하여 종이에서 모든 도면을 지울 수 있습니다. 라인과 다각형 더 복잡한 그림을 덮으려면 한 걸음 물러서서 드로잉 라인에 대해 이야기해야합니다. 예상 대로이 메소드는 아래와 같이 라인 엔드 포인트의 4 가지 좌표를 취합니다.

훨씬 더 흥미로운 점은 복잡한 폴리 라인을 그릴 수 있다는 것입니다 : var line = paper.polyline (10, 100, 110, 200); 원칙적으로 위의 줄 () 메소드와 동일하지만 시각적 결과에 놀랄 것입니다. 이유를 보려면 를 시도해 봅시다

paper.polyline () 및 paper.polygon ()은 동일한 방법에 대한 별칭이며, 기본적으로 결과 (닫힌) 다각형은 검은 색 충전과 뇌졸중으로 그려집니다. 그렇기 때문에 위의 폴리 라인 ()로 그려진 선을 볼 수 없었던 이유입니다 (페이지를 검사하여 SVG 코드가 실제로 컨테이너에 추가되었는지 확인할 수는 있지만)

. 이 동작과 다른 요소의 모양을 바꾸려면 속성을 소개해야합니다. 속성 스냅 요소에 대한 속성의 개념은 평소보다 다소 넓습니다. 즉, 동일한 인터페이스의 HTML 속성과 CSS 속성이 모두 포함되어 있음을 의미합니다 (대부분의 다른 라이브러리는 HTML 속성에 대한 .attr () 메소드를 구별합니다. 스타일 () 'CSS 용의 경우). Snap Wrapper 개체에서 element.attr () 메소드를 사용하면 색상 또는 너비뿐만 아니라 클래스 또는 ID를 설정할 수 있습니다. 위에서 언급했듯이 Snap을 사용하면 CSS 속성을 요소에 할당하는 두 가지 방법이 있습니다. 하나는이 속성을 별도의 CSS 파일에 포함시킨 다음 적절한 클래스를 요소에 할당하는 것입니다.

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

JavaScript를 사용하여 이러한 속성을 할당하여 동일한 결과를 얻을 수 있습니다.

다시 한 번, 첫 번째 방법은 내용과 프레젠테이션을 더 잘 분리 할 수있는 반면, 두 번째 방법은 속성을 동적으로 변경할 수있는 가능성을 제공합니다. 두 가지 전략을 혼합하려는 경우 CSS 파일에 정의 된 규칙은 요소에 할당 된 시간 순서에도 불구하고 CSS 파일에 정의 된 규칙이 요소에 지정된 규칙을 능가합니다. 스타일을 원하는 요소에 대한 참조를 유지하지 않았다면 걱정하지 마십시오. CSS 선택기를 사용하여 쉽게 가져올 수 있습니다.

<span>var s = <span>Snap</span>(800, 600);</span>

그룹 SVG 요소를 그룹의 모든 요소에 공통 변환 및 이벤트 처리를보다 쉽게 적용 할 수 있도록 그룹화 할 수 있습니다. 그룹을 만드는 것은 쉽습니다

<:> 조심하십시오 : 질서 나 논쟁이 중요합니다! 둘째, 요소를 그룹에 할당하면 이미 속한 그룹에서 제거됩니다. 물론 요소는 기존 그룹이 생성 된 후에도 추가 할 수 있습니다.

이미지 SNAP SNAP는 SVG 요소 내부의 중첩 래스터 이미지를 지원하여 비동기 적으로로드하고로드 완료시 만 표시합니다.

<span><span><span><script> src<span >="/js/snap.svg-min.js"</script></span>></span><span><span></span>></span></span>

결과 객체는 SVG 요소로 취급 될 수 있습니다. 참고, 이미지에서 select ()를 사용하여 나중에 그것들을 검색하는 경우, 생성 된 래퍼는 HTML 요소의 경우이므로 SVG 요소에 사용할 수있는 대부분의 방법은 지원되지 않습니다.

변환 우리는 타원 및 사각형과 같은 비대칭 다각형을 그리는 방법을 보았습니다. 그러나 기본 방법은 우리가 직교 축에 정렬 된 이러한 수치를 그려야합니다. x-y 축에 대해 축이 45 ° 회전하는 타원을 그리고 싶다면 어떻게해야합니까? 우리는 창조 방법에서 이것을 지정할 수 없지만 변환을 사용하여 동일한 결과를 얻을 수 있습니다. 마찬가지로, 우리는 이미지를 회전 시키거나 생성 후 어느 시점에서 요소 (또는 그룹)를 이동해야 할 수도 있습니다. transform () 메소드는 SVG 변환 문자열을 전달하여 그렇게 할 수 있습니다.

이 메소드는 문자열이나 객체를 입력으로 취할 수 있습니다. 또한 요소와 관련된 변환 매트릭스를 사용하여 동일한 변환을 다른 요소에 적용 할 수 있습니다.

<:> 조심하십시오 : 두 번째 요소의 변형 중심은 여전히 첫 번째 요소에 사용되는 중심이 될 것이므로 최종 효과는 당신을 놀라게 할 수 있습니다. . 변환 () 메소드를 사용하여 호출 된 요소의 변환 디스크립터 개체를 검색 할 수 있습니다. 인수없이 호출하십시오. 이 설명자는 중첩 요소의 경우 로컬 변환 행렬 및 차이 행렬을 검색하는 데 사용될 수 있습니다.

결론 이 기사에서는 Snap.svg의 기본 사항에 대한 소개를 제공했습니다. 가장 멋진 것들을보고 싶다면 고급 후속 조치가 곧 게시 될 예정이므로 계속 지켜봐 주시기 바랍니다.

데이터 시각화 및 SNAP에 대해 자세히 알아 보려면 몇 가지 유용한 리소스가 있습니다.

snap.svg 튜토리얼 데이터 시각화 및 고급 기술에 대한 프레젠테이션에서 미끄러짐 코드펜에서 위의 위의 일부 코드를 살펴보십시오.

<span>var s = <span>Snap</span>(800, 600);</span>

SNAP SVG

에 대한 자주 묻는 질문 (FAQS) SNAP SVG와 다른 SVG 라이브러리의 차이점은 무엇입니까?

<span><span><span><svg> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></svg></span>
</span>  ...
<span><span><span></span>></span></span></span>

SNAP SVG는 SVG (Scalable Vector Graphics)로 작업하기 위해 특별히 설계된 강력하고 유연한 라이브러리입니다. 다른 SVG 라이브러리와 달리 SNAP SVG는 기존 SVG 컨텐츠와 SNAP SVG로 생성 된 SVG 컨텐츠를 모두 애니메이션하고 조작하기위한 간단하고 직관적 인 API를 제공합니다. 또한 그라디언트, 패턴 및 클리핑 경로를 포함한 대부분의 SVG 기능을 지원하며 모든 현대식 브라우저와 호환됩니다.

Snap SVG를 사용하여 어떻게 시작할 수 있습니까?

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

SNAP SVG를 사용하여 SNAP SVG, Snap SVG JavaScript 파일을 HTML 문서에 포함시켜야합니다. 공식 Snap SVG 웹 사이트에서 다운로드하거나 CDN에서 직접 포함시킬 수 있습니다. Snap SVG 파일을 포함 시키면 Snap SVG API를 사용하여 SVG 컨텐츠를 작성하고 조작 할 수 있습니다. 복잡한 애니메이션에 Snap SVG를 사용할 수 있습니까?

예, Snap SVG는 복잡한 애니메이션을 만드는 데 적합합니다. SVG 속성을 애니메이션 할 수있는 강력한 애니메이션 API를 제공합니다. Snap SVG의 매트릭스 변환을 사용하여 복잡한 애니메이션을 쉽게 만들 수 있습니다. 또한 SNAP SVG는 부드럽고 자연스러운 애니메이션을 만드는 데 사용할 수있는 완화 기능을 지원합니다.

SNAP SVG는 모든 브라우저와 호환됩니까?

SNAP SVG는 Chrome을 포함한 모든 최신 브라우저와 호환됩니다. , Firefox, Safari, Opera 및 Internet Explorer 9 이상. 그러나 일부 SVG 기능은 구형 브라우저에서 완전히 지원되지 않을 수 있습니다.

Snap SVG를 사용하여 대화식 SVG 컨텐츠를 어떻게 만들 수 있습니까?

SNAP SVG는 대화 형 SVG 콘텐츠를 생성하기위한 간단하고 직관적 인 API를 제공합니다. . Snap SVG의 이벤트 처리 기능을 사용하여 클릭 또는 마우스 이동과 같은 사용자 상호 작용에 응답 할 수 있습니다. Snap SVG의 애니메이션 API를 사용하여 대화식 애니메이션을 만들 수도 있습니다.

다른 JavaScript 라이브러리와 함께 Snap SVG를 사용할 수 있습니까?

예, Snap SVG는 다른 JavaScript 라이브러리와 함께 사용할 수 있습니다. 다른 라이브러리를 방해하지 않으며 기본 JavaScript 객체를 수정하지 않습니다. 이로 인해 SNAP SVG는 다른 JavaScript 라이브러리를 사용하는 프로젝트에 훌륭한 선택이됩니다.

SNAP SVG를 사용하여 기존 SVG 컨텐츠를 조작 할 수있는 방법?

SNAP SVG는 기존 SVG 컨텐츠를 조작하기위한 강력한 API를 제공합니다. Snap SVG의 함수를 사용하여 SVG 요소의 속성을 변경하고 SVG 요소를 변환하며 SVG 요소를 애니메이션 할 수 있습니다. Snap SVG의 선택기 함수를 사용하여 특정 SVG 요소를 선택할 수도 있습니다.

Snap SVG를 사용하여 SVG 필터를 만들 수 있습니까?