web-dev-qa-db-ja.com

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

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

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

javascriptgraphicssvg
78
user123757

Wikipediaのこのリスト で、どのブラウザーがSVGをサポートしているかをご覧ください。また、脚注の詳細へのリンクも提供します。たとえば、Firefoxは基本的なSVGをサポートしていますが、現時点ではほとんどのアニメーション機能がありません。

Javascriptを使用してSVGオブジェクトを作成する方法に関するチュートリアルは、 here にあります。

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");
32
schnaader

この答えは2009年からです。今、誰かがそれを最新のものにしたい場合のコミュニティwikiです。

IEには、SVGを表示するプラグインが必要です。最も一般的なのは、アドビがダウンロードできるものです。ただし、アドビはサポートも開発もしていません。 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);
23
fuzzyTew

クロスブラウザで実行するには、 RaphaelJS を強くお勧めします。それは優れたAPIの地獄を持ち、SVGを理解できないIEでVMLを実行します。

18
Boldewyn

IE SVGをサポートするすべての最新のブラウザ

Javascriptを使用してSVGを操作する方法に関するステップバイステップガイドを提供するチュートリアルを次に示します。

JavaScriptを使用したSVGスクリプトパート1：単純な円

のように Boldewyn はあなたが望むなら既に言った

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

今のところ、ライブラリのサイズが大きすぎると感じています。それはあなたが必要としないかもしれないいくつかの素晴らしい機能を持っています。

9
U.Ahmad

jQuery SVG ライブラリがとても好きです。 SVGで操作する必要があるたびに役立ちます。 JavaScriptからのSVGでの作業を本当に容易にします。

7
Bakhtiyor

私は答えを見つけられなかったので、サークルを作成して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>
5
themadmax

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

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

イントロから：

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

2
Trevor Robinson

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

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

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

2
Phil

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

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

2
Nikunj Aggarwal

すべてのブラウザがSVGをサポートしているわけではありません。 IEはそれらを使用するためのプラグインが必要です。svgは単なるxmlドキュメントであるため、JavaScriptはそれらを作成できます。 。

このリンクには、javascriptおよびsvgに関する情報があります。

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

2
kemiller2002

IE 9は現在、基本的なSVG 1.1をサポートしています。 IE9はまだGoogle ChromeおよびFirefox SVGのサポートよりもはるかに遅れています。

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

0
oabarca

したがって、JSでSVGを1つずつ作成する場合は、createElement()を使用しないでください。描画されません。代わりにこれを使用してください。

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