0

SVG ベースのメニューを作成しようとしています。私は SVG にまったく慣れていないので、JS と SVG の間の相互作用の簡単な例を 1.5 日間探していました。私の文書構造は次のとおりです。

/LOCAL_FOLDER (not on a server yet)
   +index.html
   /CSS
      +global.css
   /JS
      +navigation.js
   /IMAGES
      +navigation.svg

私は単純なhtmlボディを持っています

<body>
    <div id="outer-container">
        <div id="navigation-container" onclick="javascript:changeColor();" >
            <object id="navigation" type="image/svg+xml" data="images/test.svg" >Your browser does not support SVG</object>
        </div>
    </div>
</body>

私のSVGは次のようになります（今のところ） 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle id="test" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

これは、私が使用したい一般的な構造です。ご覧のとおり、HTML ヘッド (リンク) の JS が SVG #test とやり取りしています。今のところ、読み込み時に不透明度を変更することに対処して、相互作用の方法を理解し始めることができます。

JQuerySVG、Raphael、ストレート JS、SVG 内の JS などを試しましたが、接続できないようです。私が探しているのは (そして、操作上のスニペットを見つけることができないようです) は、私が学ぶことができる非常に基本的な例です...

4

1 に答える 1

0

私が試したことから、data="" を使用して成功することはめったにありませんでしたが、container.load(your.svg) のようなものを使用して、心ゆくまで変更することができました。

別の問題は、svg データが標準であることを確認することです。

そこから（私はjQueryを使用しました）jQuery('#test').attr('style','stroke:#ff0000')、ストロークを赤に変更する必要があります。

于 2013-07-19T20:55:02.453 に答える