5

いくつかの Flash ベースのアプリケーションを HTML+JavaScript+SVG に移行しようとしています (単一のターゲット レンダリング エンジンは Webkit です)。

私は SVG にまったく慣れていないので、SVG をテンプレート画像として使用して画面を塗りつぶし、含まれているテキストを HTML ページに埋め込まれた JavaScript コードからオンザフライで変更できるかどうかを知りたいです。

私がやりたいことは、Inkscape でページの基本構造を描画し (いくつかのグラフィックスとテキスト プレースホルダーを使用)、HTML ページに SVG を表示し、JavaScript を介してテキスト プレースホルダーを埋めることです。

背景に静的な SVG 画像を表示し、その上に絶対位置の DIV を配置してテキストを表示することで同じ結果を得ることができましたが、Inkscape 内からテキスト ラベルの位置、サイズ、およびスタイルを設計したいと考えています。 .

これはできますか？どのように？

JQuery ではなく、 Prototype フレームワークを使用しています。

4

3 に答える 3

6

jQuery を試してみてください。ID を SVG-TextNode に手動で設定してから、次のことを試してください。

$("#my_id").textContent = "new Value";

うまくいくかもしれません。それ以外の場合は、次を試してください。

document.getElementById("my_id").textContent = "new Value";
于 2011-05-30T09:13:05.007 に答える
3

SVG にアクセスする方法は、ページにどのように含めるかによって異なります。objectandまたは要素を使用embedして SVG にリンクするか、ページにインラインで含めることができます。SVG は画像の「ブラック ボックス」として扱われ、内部構造にアクセスすることimgはできません。

オブジェクトを介した埋め込みは簡単で、SVG をサポートするすべてのブラウザーで機能します。

<object id="svg_object" width="672" height="243" data="myimage.svg" type="image/svg+xml">
    No SVG support
</object>

次に、内部構造を取得するには、次を取得する必要がありますcontentDocument。

var svg = $('svg_object').contentDocument;
var svgel = svg.getElementById('myid');

この場合、SVG の内部 DOM は、prototype.js によって自動的に拡張されないことに注意してください。そのため、通常の DOM メソッドに頼る必要があります。

SVG をページに直接埋め込むことは、ページをapplication/xhtml+xmlHTML5 準拠のパーサー (Firefox 4、Chrome、IE9、Opera またはそれ以前の Firefox を除く) で提供している場合に機能します。ただし、prototype.js メソッドは SVG 要素と直接連携するようになり、特定のことがより単純になります。

var svgel = $('myid');

object、inlineの例をいくつか示しました。それらは Firefox 4 で動作します。他のブラウザで動作させるには、いじる必要があるかもしれません (サポートに関する限り、上記の注意事項があります)。

于 2011-05-30T15:49:28.963 に答える
0

SVG は XML ベースのドキュメントであり、XHTML ドキュメントを操作するのと同じように JavaScript で操作できます。

getElementById は、xhtml と同じように SVG で機能するため、SVG 内のテキストを動的に変更できます。

于 2011-05-30T09:13:55.960 に答える