0

我正在尝试创建一个基于 SVG 的菜单。我对 SVG 完全陌生，并且一直在寻找 1.5 天来寻找 JS 和 SVG 之间交互的简单示例。我的文档结构是：

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