Javascriptを使用してSVGグラフィックを作成しますか？

JavaScriptを使用してSVGグラフィックを作成するにはどうすればよいですか？

すべてのブラウザがSVGをサポートしていますか？

見ていWikipediaのこのリストのブラウザがSVGをサポートするかについてを。また、脚注の詳細へのリンクも提供します。たとえば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年のものです。誰かがそれを最新のものにしたいと思っている場合に備えて、コミュニティwikiになりました。

IEには、SVGを表示するためのプラグインが必要です。最も一般的なのは、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をサポートしています

これは、javascriptを使用してSVGを操作する方法のステップバイステップガイドを提供するチュートリアルです。

JavaScriptを使用したSVGスクリプティングパート1：シンプルサークル

同様Boldewynは、あなたがしたい場合は、既に述べています

クロスブラウザで行うには、RaphaelJSを強くお勧めします：rapaheljs.com

今は図書館の大きさが大きすぎる気がしますが。それはあなたが必要としないかもしれない多くの素晴らしい機能を持っています。

私はjQuerySVGライブラリがとても好きです。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

Javascriptを介してSVGを操作できるjQueryプラグインがあります。

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

そのイントロから：

Firefox、Opera、Safariでネイティブにサポートされており、IEのAdobe SVGビューアまたはRenesisプレーヤーを介して、SVGを使用するとWebページ内にグラフィックを表示できます。これで、JavaScriptコードからSVGキャンバスを簡単に駆動できます。

d3.jsを使用できます。使いやすく強力です。

D3.jsデータに基づいてドキュメントを操作するためのJavaScriptライブラリです。D3は、HTML、SVG、CSSを使用してデータに命を吹き込むのに役立ちます。

Snap、Raphael、D3のようなJavascriptを使用するSVGグラフィックスには複数のライブラリがあります。または、SVGをプレーンなJavaScriptと直接インターフェースすることもできます。

現在、ブラウザのすべての最新バージョンはSVGv1.1をサポートしています。SVG v2.0はワーキングドラフトであり、使用するには時期尚早です。

この記事では、Javascriptを使用してSVGを操作する方法を示し、ブラウザーサポートのリンクを参照します。SVGとのインターフェース

IE9は基本的なSVG1.1をサポートするようになりました。IE9はまだGoogleChromeとFirefoxSVGのサポートに大きく遅れをとっていますが、それはもうすぐです。

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

したがって、JSでSVGを1つずつ作成する場合は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>