0

我正在尝试制作交互式 svg，它会使用 javascript 函数对某些操作做出反应。

我的SVG看起来像这样（这是我正在生成的许多 svg 之一的示例，我删除了一些不相关的元素以使代码更具可读性）：

<svg contentScriptType="text/ecmascript" onmouseover="myOpacity(&apos;msg0&apos;, 0.5)" 
     onclick="svgClick(&apos;Some example text&apos;)" 
     width="760" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify"
     onmouseout="myOpacity(&apos;msg0&apos;, 1)" 
     contentStyleType="text/css" height="30" preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg" version="1.0">

  <text fill="black" x="10" id="msg0" font-size="10" y="20">Some text</text>
  <script xlink:href="script.js" xlink:actuate="onLoad" 
          xlink:type="simple" xlink:show="other" type="text/ecmascript" 
          xmlns:xlink="http://www.w3.org/1999/xlink"/>

</svg>

这是我的带有 onClick 和 opacity 函数的script.js文件：

function svgClick(text) {
  alert(text);
}

function myOpacity(element_id, op_value) 
{
  element = document.getElementById(element_id);
  element.setAttribute('opacity', op_value);
}

问题是 myOpacity 函数不起作用，当我将鼠标悬停在我的对象上时没有任何反应（尽管 id 应该对应于函数的参数）。但是，onCLick 函数可以完美运行，因此问题可能在于通过 id 识别元素。

我被困在这里了，你能看看代码并告诉我哪里出错了吗？

编辑：这是此答案的后续内容：交互式 SVG - 如何选择元素以对鼠标悬停动作做出反应？

该代码在那里工作，但它在我在这里发布的代码中没有做任何事情。所以我的问题是为什么？我知道我可以通过属性来做到这一点，但在这种情况下，我不知道如何处理场景，当我想在另一个元素上触发鼠标悬停动作时将不透明度设置为一个元素......

4

2 回答 2

0

我将您的代码粘贴到 jsFiddle 中（使 JavaScript 内联），它在 Firefox 和 Chrome 中没有问题：

http://jsfiddle.net/wpZs6/

但是，仅使用 CSS 悬停选择器，悬停部分可能会容易得多：

<svg width="760" height="30" xmlns="http://www.w3.org/2000/svg" version="1.0">
  <style type="text/css">
    svg:hover #msg0 {opacity:.5}
  </style>
  <text fill="black" x="10" id="msg0" font-size="10" y="20">Some text</text>
</svg>

见这里：http: //jsfiddle.net/L58z6/

于 2013-06-26T09:15:18.680 回答
0

尝试这个 ：

var divtmp = document.getElementById(element_id); 

var newStyle = "filter:alpha(opacity=85);-moz-opacity:0.85; opacity: 0.85;";

divtmp.setAttribute("style", newStyle );
于 2013-06-26T07:37:29.457 回答