Javascript SVG/JS交互-简单版本_Javascript_Svg

Javascript SVG/JS交互-简单版本

javascript svg

Javascript SVG/JS交互-简单版本,javascript,svg,Javascript,Svg,我正在尝试创建一个基于SVG的菜单。我对SVG完全不熟悉，已经搜索了1.5天，寻找JS和SVG之间交互的简单示例。我的文档结构是： /LOCAL_FOLDER (not on a server yet) +index.html /CSS +global.css /JS +navigation.js /IMAGES +navigation.svg <svg xmlns="http://www.w3.org/2000/svg" xm

我正在尝试创建一个基于SVG的菜单。我对SVG完全不熟悉，已经搜索了1.5天，寻找JS和SVG之间交互的简单示例。我的文档结构是：

/LOCAL_FOLDER (not on a server yet)
   +index.html
   /CSS
      +global.css
   /JS
      +navigation.js
   /IMAGES
      +navigation.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主体

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


您的浏览器不支持SVG

我的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测试交互。现在，我要处理的是让它在加载时更改不透明度，这样我就可以开始了解如何进行交互

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

我试过JQuerySVG、Raphael、straight JS、SVG中的JS等等，但我似乎无法连接。我正在寻找的（似乎找不到可操作的片段）是一个超级基本的示例，我可以从中学习…

从我的尝试中，我很少成功地使用data=“”，但是使用类似container.load（your.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>

另一个问题是确保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>

从那里（我使用jQuery）

jQuery（'#test'）。attr（'style'，'stroke:#ff0000'）

应该将笔划更改为红色。

将让您启动并运行大约30行代码，这是非常基本的。除非您希望在svg中直接使用ECMAScript，但我假设您会问另一个问题。Container.load很可爱，但它仍然没有像您所暗示的那样优雅地工作。这是我的代码：函数drawNav（svg）{svg.load（'images/navigation.svg'）；}$（window）.load（函数（）{$（'#navigation container'）.svg（{onLoad:drawNav}）；$（'#link-t-r'）.attr（'style'，'stroke:#ff0000'）；}）；你可能会注意到我写了#link-t-r，这是实际导航文件中的一个元素，而navigation.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>