I have some javascript in an svg file to change class, on click, so the opacity remains 1. But the change is applying to the items in the group - not the group itself? How can I apply this to the group class? I tried adding in ".parentnode" but it didn't seem to work like this:

target.parentnode.setAttributeNS('', 'class', 'overlay_active');

Here's what I've got...

<svg>
 <script type="application/javascript"><![CDATA[
function toggle(evt)
{
  var target;
  target = evt.target;
  if (target.getAttributeNS('', 'class') == 'overlay1')
    target.setAttributeNS('', 'class', 'overlay_active');
  else
    target.setAttributeNS('', 'class', 'overlay1');
}
    ]]></script>


      <style type="text/css" media="screen">
     .overlay1 { opacity:0;}
     .overlay1:active { opacity:.9; }
    .overlay1:hover { opacity:.9; 
    }

    .overlay_active { opacity:1;}

    </style>

<g class="overlay1"
onclick="top.showit('option33');toggle(evt);">

        <path d="M144,129 205,129 205,174 144,174" style="fill:#97aa2b;" />
        <text x="166" y="159" font-family="arial" font-size="19" fill="white" 
        > 05 </text>
 </g>

</svg>

aha...

I think I got it... Although, I'm open to better ways of doing this:

    <script type="application/javascript"><![CDATA[
function toggle(evt){
    var target;
    targetx = evt.target;
    var target = targetx.parentNode;
    var elems = document.getElementsByClassName('overlay_active');
    for (var i=0, length = elems.length; i < length; i++) {
        elems[i].setAttributeNS('', 'class', 'overlay1');
    }

    if (target.getAttributeNS('', 'class') == 'overlay1'){
    target.setAttributeNS('', 'class', 'overlay_active');
    }
  else {
    target.setAttributeNS('', 'class', 'overlay1');
    }
}
    ]]></script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.