svg는 자바스크립트에서 무엇을 합니까?

JavaScript에서 svg는 2차원 벡터 그래픽을 설명하기 위한 XML 기반의 그래픽 형식인 확장 가능한 벡터 그래픽을 의미합니다. "svg.js"는 svg를 조작하고 애니메이션을 정의할 수 있는 경량 JavaScript 라이브러리입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트에서 svg는 무엇인가요?

SVG가 무엇인가요?

SVG는 확장 가능한 벡터 그래픽을 나타냅니다.

SVG는 웹용 벡터 기반 그래픽을 정의하는 데 사용됩니다.

SVG는 XML 형식을 사용하여 그래픽을 정의합니다.

SVG 이미지는 확대하거나 크기를 조정할 때 그래픽을 갖습니다. 품질 저하 없음

SVG는 World Wide Web Consortium의 표준입니다

SVG는 DOM 및 XSL과 같은 W3C 표준과 통합됩니다

소개:

SVG.js는 경량 JavaScript 라이브러리로, SVG를 쉽게 조작하고 애니메이션을 정의할 수 있습니다.

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 설명하는 데 사용되는 XML 기반 그래픽 형식입니다. SVG는 W3C에서 개발되었으며 개방형 표준입니다.

SVG.js에는 이동, 크기 조절, 회전, 기울이기 등 애니메이션을 정의하는 다양한 방법이 포함되어 있습니다. 자세한 내용은 관련 데모를 참조하세요.

•읽기 쉽고 간결한 구문

•매우 가볍고 gzip 압축 버전은 5k에 불과합니다.

•크기, 위치, 색상 등에 대한 애니메이션 요소

•모듈식 구조, 쉬운 확장

•다양하고 실용적인 플러그 -ins

•다양한 모양 유형에 걸쳐 균일한 API.

•요소는 터치 이벤트를 포함한 이벤트에 바인딩될 수 있습니다.

•불투명 마스크 완벽 지원

•요소 그룹

•동적 그라데이션

•채우기 모드

• 전체 문서

SVG 문서 만들기

SVG() 함수를 사용하여 지정된 HTML 요소에서 SVG 문서를 만듭니다.

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

SVG()의 매개변수는 요소의 ID 또는 요소 자체일 수 있습니다. .

위의 두 문장은 HTML 문서에 다음 코드를 생성합니다.

<div id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>

물론 SVG 캔버스의 크기를 정의하기 위해 픽셀을 사용하는 것 외에도 백분율을 사용할 수도 있습니다. 다음과 같습니다.

var draw = SVG('canvas').size('100%', '100%')

SVG에 대한 브라우저 지원 감지

svg.js를 사용하기 전에 다음 코드를 사용하여 svg.js 라이브러리에 대한 브라우저 지원을 감지할 수 있습니다.

if (SVG.supported) { 
var draw = SVG('canvas') 
var rect = draw.rect(100,100) } 
else { 
alert('SVG not supported') }

ViewBox

7fc93ebd8ab06ad857a3fe48f424dbd7, 마지막 두 개는 너비와 높이입니다.

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

매개변수가 없으면 뷰박스는 빈 486d7a50595533609bc98d44595dc670를 직접 반환합니다.

var box = draw.viewbox()

viewbox() 메소드는 확대/축소 속성을 가질 수 있습니다.

var box = draw.viewbox() var zoom = box.zoom

뷰박스의 486d7a50595533609bc98d44595dc670 실제 SVG와 동일합니다. 캔버스의 크기는 동일하며, Zoom 값은 1입니다.

SVG document

svg.js는 htmlDOM 외부에서도 작동할 수 있으며, 아래와 같이 독립적인 svg입니다. 외부 js 파일과 같습니다.

<?xml version="1.0" encoding="utf-8" ?> 
<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"> 
<script type="text/javascript"xlink:href="svg.min.js">
</script> 
<scripttype="text/javascript"> 
<![CDATA[ 
var draw = SVG(&#39;viewport&#39;) 
draw.rect(100,100).animate().fill(&#39;#f03&#39;).move(100,100) 
]]> 
</script> 
</svg>

관련 추천: javascript 학습 튜토리얼

위 내용은 svg는 자바스크립트에서 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!