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

자바 스크립트를 사용하여 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로 작업하는 방법에 대한 단계별 가이드를 제공하는 자습서입니다.

JavaScript를 사용한 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 is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.

---

There are multiple libraries on SVG graphics using Javascript like: Snap, Raphael, D3. Or you can directly interface the SVG with plain javascript.

Currently all latest versions of the browsers support SVG v1.1. SVG v2.0 is in Working Draft and too early to use it.

This article shows how to interact with SVG using Javascript and has reference to links for browser support. Interfacing with SVG

---

IE 9 now supports basic SVG 1.1. It was about time, although IE9 still is far behind Google Chrome and Firefox SVG support.

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

---

So if you want to build your SVG stuff piece by piece in JS, then don't just use createElement(), those won't draw, use this instead:

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

참고 URL : https://stackoverflow.com/questions/1034712/creating-svg-graphics-using-javascript