자바 스크립트를 사용하여 SVG 그래픽을 만드시나요?

JavaScript를 사용하여 SVG 그래픽을 어떻게 만들 수 있습니까?

모든 브라우저가 SVG를 지원합니까?

SVG를 지원하는 브라우저 에 대한 Wikipedia의이 목록을 살펴보십시오 . 또한 각주에서 자세한 내용에 대한 링크를 제공합니다. 예를 들어 Firefox는 기본 SVG를 지원하지만 현재 대부분의 애니메이션 기능이 부족합니다.

Javascript를 사용하여 SVG 개체를 만드는 방법에 대한 자습서는 여기 에서 찾을 수 있습니다 .

var svgns = "http://www.w3.org/2000/svg";
var svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green"); 

이 답변은 2009 년의 것입니다. 이제 누군가가 최신 정보를 가져 오려는 경우를 대비 한 커뮤니티 위키입니다.

IE는 SVG를 표시하기 위해 플러그인이 필요합니다. 가장 일반적인 것은 Adobe에서 다운로드 할 수있는 것입니다. 그러나 Adobe는 더 이상이를 지원하거나 개발하지 않습니다. Firefox, Opera, Chrome, Safari는 모두 기본 SVG를 제대로 표시하지만 지원이 불완전하므로 고급 기능을 사용하면 문제가 발생합니다. Firefox는 선언적 애니메이션을 지원하지 않습니다.

SVG 요소는 다음과 같이 javascript로 만들 수 있습니다.

// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");
// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);

SVG 규격은 모든 SVG 요소들의 DOM 인터페이스를 설명한다. 예를 들어, 상기 생성되는 SVGCircleElement, 보유 cx, cy및 r직접 액세스 할 수있는 중앙 포인트 및 반경에 대한 속성. 이는 SVGAnimatedLength 속성으로, baseVal일반 값에 대한 animVal속성과 애니메이션 값에 대한 속성이 있습니다. 현재 브라우저는이 animVal속성을 안정적으로 지원하지 않습니다 . 속성에 baseVal의해 값이 설정되는 SVGLength value입니다.

따라서 스크립트 애니메이션의 경우 이러한 DOM 속성을 설정하여 SVG를 제어 할 수도 있습니다. 다음 코드는 위 코드와 동일해야합니다.

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.cx.baseVal.value = 25;
shape.cy.baseVal.value = 25;
shape.r.baseVal.value = 20;
shape.setAttribute("fill", "green");
document.documentElement.appendChild(shape);

크로스 브라우저를 사용하려면 RaphaelJS를 강력히 권장 합니다 . 그것은 훌륭한 API를 가지고 있으며 SVG를 이해할 수없는 IE에서 VML을 수행합니다.

IE를 제외한 모든 최신 브라우저는 SVG를 지원합니다.

다음은 자바 스크립트를 사용하여 SVG로 작업하는 방법에 대한 단계별 가이드를 제공하는 자습서입니다.

자바 스크립트를 사용한 SVG 스크립팅 Part 1 : Simple Circle

마찬가지로 Boldewyn는 당신이 원하는 경우 이미 말했다

크로스 브라우저를 사용하려면 RaphaelJS를 강력히 추천합니다 : rapaheljs.com

지금은 도서관의 크기가 너무 큽니다. 일부는 필요하지 않을 수있는 많은 훌륭한 기능이 있습니다.

나는 jQuery SVG를 좋아한다. 라이브러리를 매우 합니다. SVG로 조작해야 할 때마다 도움이됩니다. JavaScript에서 SVG로 작업하는 것을 정말 용이하게합니다.

나는 답을 찾지 못 했으므로 서클을 만들고 svg에 추가하려면 다음을 시도하십시오.

var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svg');
var shape = document.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green");
svg.appendChild(shape);

<svg id="svg" width="100" height="100"></svg>

모든 브라우저가 SVG를 지원하는 것은 아닙니다. IE를 사용하려면 플러그인이 필요하다고 생각합니다. svg는 xml 문서 일 뿐이므로 JavaScript에서 만들 수 있습니다. 그래도 브라우저에로드하는 것이 확실하지 않습니다. 나는 그것을 시도하지 않았습니다.

이 링크에는 javascript 및 svg에 대한 정보가 있습니다.

http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

자바 스크립트를 통해 SVG를 조작 할 수있는 jQuery 플러그인이 있습니다.

http://plugins.jquery.com/project/svg

소개에서 :

Firefox, Opera 및 Safari에서 기본적으로 지원되고 IE의 Adobe SVG 뷰어 또는 Renesis 플레이어를 통해 지원되는 SVG를 사용하면 웹 페이지 내에 그래픽을 표시 할 수 있습니다. 이제 JavaScript 코드에서 SVG 캔버스를 쉽게 구동 할 수 있습니다.

d3.js를 사용할 수 있습니다. 사용하기 쉽고 강력합니다.

D3.js데이터를 기반으로 문서를 조작하기위한 JavaScript 라이브러리입니다. D3는 HTML, SVG 및 CSS를 사용하여 데이터에 생명을 불어 넣는 데 도움이됩니다.

Snap, Raphael, D3와 같은 Javascript를 사용하는 SVG 그래픽에는 여러 라이브러리가 있습니다. 또는 일반 자바 스크립트로 SVG를 직접 인터페이스 할 수 있습니다.

현재 모든 최신 버전의 브라우저는 SVG v1.1을 지원합니다. SVG v2.0은 Working Draft에 있으며 사용하기에는 너무 이르다.

이 기사에서는 Javascript를 사용하여 SVG와 상호 작용하는 방법을 보여주고 브라우저 지원을위한 링크에 대한 참조를 제공합니다. SVG와 인터페이스

IE 9는 이제 기본 SVG 1.1을 지원합니다. IE9는 여전히 Google Chrome 및 Firefox SVG 지원보다 훨씬 뒤떨어져 있지만 시간이되었습니다.

http://msdn.microsoft.com/en-us/ie/hh410107.aspx

따라서 JS에서 SVG 항목을 하나씩 빌드하려면을 사용 createElement()하지 말고 그리지 않습니다. 대신 다음을 사용하십시오.

var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");

현재 모든 주요 브라우저 는 svg를 지원 합니다. JS는 매우 간단에서 SVG를 작성 (현재 innerHTML=...입니다 매우 빠르게 )

element.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
`;

function createSVG() {
  box.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
  `;
}

function decRadius() {
  r=circ.getAttribute('r');
  circ.setAttribute('r',r*0.5);
}

<button onclick="createSVG()">Create SVG</button>
<button onclick="decRadius()">Decrease radius</button>
<div id="box"></div>