Невозможно установить непрозрачность элемента

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> 

Это мой сценарий. JS файл с функциями OnClick и непрозрачности:

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

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

проблема заключается в том, что функция myOpacity не работает, и ничего не происходит, когда я наведите курсор мыши на мои объекты (несмотря на ид должен соответствовать аргументу функции). Однако функция onCLick работает отлично, поэтому проблема, вероятно, связана с идентификацией элемента по id.

Я совершенно застрял здесь, не могли бы вы взглянуть на код и сказать мне, где я ошибся?

EDIT: это Followup из этого ответа: Interactive SVG - how to choose element to react on mouseover action?

Этот код работает там, но это как-то ничего в коде, я разместил здесь не делать. Так почему мой вопрос? Я знаю, что могу сделать это с помощью атрибутов, но в этом случае я не знаю, как обрабатывать сценарий, когда я хочу установить непрозрачность для одного элемента при срабатывании мыши на одном из них ...

Answer 1

я вставил свой код в jsFiddle (изготовление встроенный JavaScript), и она работает без проблем в Firefox и Chrome:

http://jsfiddle.net/wpZs6/

Однако парения часть может быть значительно проще с только селектор hover 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/

Answer 2

попробуйте следующее:

var divtmp = document.getElementById(element_id); 

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

divtmp.setAttribute("style", newStyle);