Cannot set opacity to element

Question

I am trying to make and interactive svg which would react to some actions with javascript functions.

My SVG looks like this (this is example of one of many svg I am generating, I deleted some irrelevant elements to make the code more readable):

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

This is my script.js file with onClick and opacity functions:

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

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

The problem is that myOpacity function does not work and nothing happens when I hover over my objects (despite the id should correspond to the argument of the function). However, the onCLick function works perfectly, so the problem is probably with identifying the element by id.

I am quite stuck here, could you take a look in the code and tell me where did I go wrong?

EDIT: this is a followup from this answer: Interactive SVG - how to choose element to react on mouseover action?

That code works there but it somehow does not do anything in the code I posted here. So my question is why? I know I could do this via attributes, but in that case, I do not know how to handle scenario, when I want to set opacity to one element when mouseover action is triggered on another one...

I don't quite get what you're trying, but SVG opacity is via attributes , not like the css one . You have fill-opacity and stroke-opacity: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity — Avner Solomon, Jun 26 '13 at 07:38
Are you sure this isn't working ? works when I'm trying it http://jsfiddle.net/FCa8S/ — Avner Solomon, Jun 26 '13 at 07:55
Wait, it works in the testing site you posted.. but it does not in my site (its a portlet). Now I am really lost, what the hell? — Smajl, Jun 26 '13 at 08:01
It seems to work anywhere but in my portlet... The onClick function works but the opacity one does not. However, when I try it somewhere else (load svg in its own window), it works there. I honestly dont know where the problem is... — Smajl, Jun 26 '13 at 08:17
Check that you are able to call my opacity from browser javascript console after loading the problematic page — Avner Solomon, Jun 26 '13 at 08:18
it says: Uncaught ReferenceError: myOpacity is not defined. Whats the problem? Is the function wrongly defined? — Smajl, Jun 26 '13 at 08:23
But the svgOnClick function works - doesnt it mean that it is included? My idea was that either all functions will work (if its included) or none... this seems weird to me — Smajl, Jun 26 '13 at 08:35
You're right. Might have other bug. Also this script must be included in head to work — Avner Solomon, Jun 26 '13 at 08:49

score 0 · Answer 1 · edited Jun 26 '13 at 07:41

0

try this :

var divtmp = document.getElementById(element_id); 

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

divtmp.setAttribute("style", newStyle );

edited Jun 26 '13 at 07:41

Ian

50,146
13
101
111

answered Jun 26 '13 at 07:37

bestpostmaster

63
6

Thomas W · Accepted Answer · 2013-06-26T09:47:21.270

0

I pasted your code into a jsFiddle (making the JavaScript inline), and it works without problems in Firefox and Chrome:

http://jsfiddle.net/wpZs6/

However, the hover part could be considerably easier with just a CSS hover selector:

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

See here: http://jsfiddle.net/L58z6/

edited Jun 26 '13 at 09:47

answered Jun 26 '13 at 09:15

Thomas W

14,757
6
48
67

I solved it - the code was correct the whole time. But my browser was looking into cache with old script.js file (altough in file explorer the file was already updated). I had to clear cache and re-deploy the project afterwards and it suddenly started working.... I will accept your answer anyway - thanks for your effort! – Smajl Jun 26 '13 at 09:26

Cannot set opacity to element

2 Answers2