JavaScript を使用して SVG グラフィックを作成するにはどうすればよいですか?
すべてのブラウザーが SVG をサポートしていますか?
116858 次
13 に答える
31
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-06-23T19:40:46.483 に答える
23
この回答は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);
于 2009-06-26T17:54:58.683 に答える
8
IE を除く最新のブラウザはすべて SVG をサポート
以下は、javascript を使用して SVG を操作する方法についての段階的なガイドを提供するチュートリアルです。
あなたが望むなら、 Boldewynがすでに言ったように
クロスブラウザーで行うには、RaphaelJS を強くお勧めします: rapaheljs.com
今はライブラリのサイズが大きすぎると感じていますが。多くの優れた機能があり、そのうちのいくつかは必要ないかもしれません.
于 2011-04-26T20:18:03.473 に答える
7
jQuery SVGライブラリがとても気に入っています。SVG を操作する必要があるたびに役立ちます。JavaScript からの SVG の操作が非常に容易になります。
于 2010-09-05T15:04:49.757 に答える
2
Javascriptを介してSVGを操作できるjQueryプラグインがあります。
http://plugins.jquery.com/project/svg
そのイントロから：
Firefox、Opera、Safariでネイティブにサポートされ、IEのAdobe SVGビューアまたはRenesisプレーヤーを介して、SVGを使用するとWebページ内にグラフィックを表示できます。これで、JavaScriptコードからSVGキャンバスを簡単に駆動できます。
于 2009-06-23T19:44:22.183 に答える
2
いいえ、すべてのブラウザーが SVG をサポートしているわけではありません。IE でそれらを使用するにはプラグインが必要だと思います。svg は単なる xml ドキュメントであるため、JavaScript で作成できます。ただし、ブラウザにロードするかどうかはわかりません。私はそれを試していません。
このリンクには、javascript と svg に関する情報があります。
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm
于 2009-06-23T19:39:34.393 に答える
2
D3.jsデータに基づいてドキュメントを操作するための JavaScript ライブラリです。D3 は、HTML、SVG、および CSS を使用してデータに命を吹き込むのに役立ちます。
于 2013-09-12T07:43:14.313 に答える
0
IE9は基本的なSVG1.1をサポートするようになりました。IE9はまだGoogleChromeとFirefoxSVGのサポートに大きく遅れをとっていますが、それはもうすぐです。
于 2013-02-19T18:02:48.097 に答える
0
したがって、JS で SVG のものを 1 つずつ作成する場合は、 を使用しないでくださいcreateElement()。これらは描画されません。代わりにこれを使用してください。
var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");
于 2013-09-16T08:07:24.757 に答える