Question

我正在尝试创建一个基于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 head（链接）的JS与我的SVG #test交互。现在，我要处理它在负载上改变不透明度，这样我才能开始搞清楚如何进行交互。

我已经尝试过JQuerySVG，Raphael，直接JS，SVG中的JS等等，我似乎无法连接。我正在寻找的东西（似乎无法找到一个可操作的片段）是一个超级基本的例子，我可以从中学习......

Answer 1

根据我的尝试，我很少使用data =“”成功，但是使用像container.load（your.svg）之类的东西，我可以修改我心中的内容。

另一个问题是确保svg数据是标准的。

从那里（我使用jQuery）jQuery('#test').attr('style','stroke:#ff0000')应该将笔画更改为红色。

SVG / JS交互 - 简单版本

1 个答案: