SVG/JS交互 - 簡單的版本

我試圖創建一個基於SVG的菜單。我對SVG完全陌生，並且一直在尋找1.5天的JS和SVG交互的簡單例子。我的文檔結構是：SVG/JS交互 - 簡單的版本

/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>

這是一般結構I想用。正如你所看到的，它有來自html head（鏈接）的JS與我的SVG #test進行交互。現在，我會處理它在加載時改變不透明度，以便我可以開始瞭解如何進行交互。

我試過JQuerySVG，拉斐爾，直的JS，JS內的SVG等，我似乎無法連接。我正在尋找（而且似乎無法找到一個可操作的片段）是一個超級基本的例子，我可以從中學習...

來源

2013-07-19 user2600636

http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/ 將幫助你運行約30行代碼，它是很基本。除非你想直接在svg中使用ECMA腳本，但我假設你會爲此提出一個不同的問題。 –

從我試過，我很少成功地使用數據=「」，然而使用類似container.load（your.svg）的東西，我可以修改我的心中的內容。

另一個問題是要確保svg數據是標準的。

從那裏（我用jQuery）jQuery('#test').attr('style','stroke:#ff0000')應該改變筆觸爲紅色。

來源

2013-07-19 20:55:02

Container.load是可愛的，但它仍然不像你似乎暗示的那樣高雅。這裏是我的代碼： function drawNav（svg）{svg.load（'images/navigation.svg'）;} $（window）.load（function（）{ \t $（'＃navigation-container'） .svg（{onLoad：drawNav}）; \t $（'＃link-t-r'）。attr（'style'，'stroke：＃ff0000'）; \t}）; 您可能會注意到我寫了＃link-t-r，這是實際導航文件中的一個元素，navigation.svg是我正在處理的文件。 – user2600636

查看http://www.kcrenterprisesllc.com/contact/custom/以查看實際行動 –

SVG/JS交互 - 簡單的版本

回答

相關問題