0

SVG オブジェクトの親 html タグに応じて、パスの色を変更したいと考えています。これは SVG で実行できますか? たとえば、ロゴがヘッダーにある場合は赤、フッターにある場合は青にします。次に例を示します。

<style type="text/css">
   #header-img {
       fill:blue;
   }

   #footer-img {
       fill:black;
   }

</style>
...
<header>
   <object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
   <object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>

確かに、これはできませんが、JavaScript を使用しない代替手段はありますか?

4

3 に答える 3

0

繰り返しになりますが、これは私が見つけることができるあなたの問題に対する最良の質問/回答です:

埋め込まれた SVG にスタイルを適用するには?

埋め込みたいファイルにリンクされたスタイルシートを手動で追加することは可能です...これにより、JavaScript の使用を避けることができます。

余計な質問をしないようにすべきだと思います。これをもっと早く入手していれば、私たちは両方ともうまくやっていただろう.

于 2012-09-29T19:54:01.740 に答える
0

はい、できます。

SVG 要素は、他の HTML/DOM 要素とほぼ同じ方法で操作できます。たとえば、Raphael JS (http://raphaeljs.com/) を使用すると、少なくとも、ブラウザー ウィンドウ内のベクター/SVG 要素の絶対位置を見つけて、それをヘッダー/フッターの絶対位置と比較できます。そして、JQuery を使用してイベントをトリガーし、SVG の色を変更します。

Raphael はさらに、古いバージョンの IE 用の VML グラフィックをレンダリングします。そのため、検討する価値は十分にあります。

とはいえ、JavaScript を使用する予定がない場合は、代わりに CSS を使用してください。ここにある実際の例で更新されました。

http://jsfiddle.net/Zp6HS/4/

'circle' 要素をカスタム パスと変更する CSS プロパティに置き換えます。

于 2012-09-24T22:38:40.793 に答える