1

色を変更し、すべての円を長方形に置き換えるなどの変更を行うには、既存のSVGドキュメントを読み込む必要があります。

javascriptを使用してSVGノード、またはRaphael拡張機能またはjQuerySVGにアクセスする方法についての記事を読みました。

私はjQuerySVGを使用することにしました。なぜなら、（私が読んだドキュメントの1つに書かれている:)既存のロードされたSVGをRaphaelで変更することはできないからです。それが本当かどうかはわかりません。

一方、いくつかのウェアが書かれました：jQuery SVGプラグインは時代遅れですか？！

これが正しいかどうかはわかりません。

現在、jQuerySVGプラグインを使用してSVGをロードしています。SVGは、次のような多くのサークルで構成されています。

<svg version="1.1" width="" height="">
 <rect class="background" x="0" y="0" width="136" height="136" style="fill:white"/>
 <circle class="dot" cx="10" cy="10" r="2"/>
 <circle class="dot" cx="14" cy="10" r="2"/>
 <circle class="dot" cx="18" cy="10" r="2"/>
 <circle class="dot" cx="22" cy="10" r="2"/>
  [...]
 <style>
  .dot {fill:#000000;}
 </style>
</svg>

これで、次のことが可能になります。1。）クラスdotを変更してすべての円の色を変更し、2。）すべての円を長方形に置き換えます。

最初の目標を達成するために、私は次svg.style()のように使用します。

mainSVG = $("#placehoplder").svg('get');
mainSVG.load(data, {addTo: true,  changeSize: false}); 
mainSVG.style('.dot {fill:'#f4a200'}');

これは機能しますが、SVGに追加のスタイル要素/ノードを追加します。

したがって、最初の質問は、既存のスタイル要素を変更/上書きする方法です。

2番目の目標を達成するために：私には、これをどのように処理するかがわかりません。

一般的にSVG要素を選択する方法がわかりません。グーグルを使用して、私はまだ何度も同じstackoverflowの質問を見つけます、それは私を助けません。また、jQuery SVGのドキュメントは、私の知る限りでは役に立ちません。（基本が欠けているため）

たとえば、すべての円の半径を変更するこの簡単なテストは機能しません。

allCircles=$('*[class~="dot"]');
mainSVG.change(allCircles,{r:10});

したがって、2番目の質問は次のとおりです。SVG要素のグループを（クラスまたは要素タイプごとに）選択して変更する方法（またはトラフを繰り返す必要がある場合がありますか？）

ありがとうございました。

4

1 に答える 1

0

しばらくの間ウェブを検索した後、私は次の解決策を選ぶことにしました：

したがって、最初の質問は、既存のスタイル要素を変更/上書きする方法です。

JSでHTMLスタイル要素を変更するように、既存のスタイル要素を変更することは困難です。私は次の方法を選択します（それが最良の選択肢のように見えるため）。最後に、古いスタイルを削除し、新しいスタイルを追加します。

  1. スタイルタグなしでサーバーサイドにSVGを作成する
  2. デフォルトのスタイルをjavascriptオブジェクトとして定義する
    svgStyle = {'.dot':{'fill':'white'}}
  3. svgStyleをHTMLソースに変換するメソッドを作成します。mySvgStyle=' .dot {fill:white}
  4. SVGをロードし、スタイル要素をSVGに適用します
    mainSVG.style(mySvgStyle);

そして今：いつも、私はSVGスタイルを変更するのが好きで、古いスタイルのSVG要素$('style', mainSVG.root()).remove();を削除し、JSオブジェクトを変更しsvgStyle（プロパティを追加または削除し）、新しいSVGスタイルタグを作成します（リストの＃3と＃4を参照）その上）

SVG要素のグループを（クラスまたは要素タイプごとに）選択して変更するにはどうすればよいですか（またはトラフを反復する必要がある場合がありますか？）？

反復が最も簡単な方法のようです。jQuerySVGプラグインの継ぎ目はDOM（SVG）要素のグループを処理できません。

于 2012-09-11T12:45:37.863 に答える