Question

我正在尝试创建和交互式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>

这是我的 script.js 文件，其中包含onClick和opacity函数：

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识别元素。

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

编辑：这是此答案的后续内容：Interactive SVG - how to choose element to react on mouseover action?

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

Answer 1

试试这个：

var divtmp = document.getElementById(element_id); 

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

divtmp.setAttribute("style", newStyle );

Answer 2

我将您的代码粘贴到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/

无法将不透明度设置为元素

2 个答案: