Hi,
I found this JS funtion to toggle opacity in a SVG, the problem I have, is that each object changes the opacity, not the whole group!
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="
http://www.w3.org/2000/svg" xmlns:xlink="
http://www.w3.org/1999/xlink" x="0px" y="0px"
width="800px" height="600px" viewBox="0 0 232.559 274.425" enable-background="new 0 0 232.559 274.425"
xml:space="preserve">
<script type="text/javascript">
<![CDATA[
var SVGDocument = null;
var SVGRoot = null;
function Init(evt)
{
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentGroup;
}
function ToggleOpacity(evt, parentId)
{
var newTarget = evt.target;
if (parentId)
{
newTarget = SVGDocument.getElementById(parentId);
}
var newValue = newTarget.getAttributeNS(null, 'opacity');
if ('0' != newValue)
{
newValue = '0';
}
else
{
newValue = '1';
}
newTarget.setAttributeNS(null, 'opacity', newValue);
if (parentId)
{
SVGDocument.getElementById(parentId + 'Exception').setAttributeNS(null, 'opacity', '1');
}
}
]]>
</script>
<g id="Layer_12" onclick="ToggleOpacity(evt)">
<polyline fill="none" stroke="#FFFFFF" stroke-miterlimit="3.864" points="128.819,83.455 109.263,114.707 53.359,114.707 "/>
<path fill="#FFFFFF" d="M128.391,84.213c-0.401-0.251-0.523-0.78-0.272-1.181c0.251-0.402,0.779-0.524,1.181-0.273
c0.402,0.251,0.524,0.78,0.273,1.181C129.322,84.341 ,128.792,84.463,128.391,84.213"/>
<line fill="none" stroke="#FFFFFF" stroke-miterlimit="3.864" x1="133.167" y1="138.48" x2="109.263" y2="114.707"/>
<path fill="#FFFFFF" d="M132.524,137.892c0.335-0.335,0.877-0.335,1.212,0c0.334,0.335,0.334,0.877,0,1.212
c-0.335,0.335-0.877,0.335-1.212,0S132.189,138.227,132.524,137.892"/>
<line fill="none" stroke="#FFFFFF" stroke-miterlimit="3.864" x1="122.713" y1="179.063" x2="109.263" y2="114.707"/>
<path fill="#FFFFFF" d="M122.496,178.219c0.463-0.098,0.918,0.198,1.017,0.661c0.098,0.463-0.198,0.918-0.66,1.017
c-0.463,0.098-0.918-0.197-1.017-0.66S122.033,178.318,122.496,178.219"/>
<polyline fill="none" stroke="#000000" stroke-width="0.425" stroke-miterlimit="3.864" points="128.819,83.455 109.263,114.707
53.359,114.707 "/>
<path d="M128.54,83.951c-0.264-0.164-0.343-0.51-0.18-0.773c0.165-0.263,0.511-0.343,0.773-0.179
c0.263,0.165,0.344,0.511,0.179,0.774C129.148,84.03 6,128.802,84.116,128.54,83.951"/>
<line fill="none" stroke="#000000" stroke-width="0.425" stroke-miterlimit="3.864" x1="133.167" y1="138.48" x2="109.263" y2="114.707"/>
<path d="M132.746,138.095c0.22-0.219,0.574-0.219,0.794,0c0.22,0.219,0.22,0.575,0,0.793c-0.22,0.22-0.574,0.22-0.794,0
C132.526,138.67,132.526,138.314,132.746,138.095"/>
<line fill="none" stroke="#000000" stroke-width="0.425" stroke-miterlimit="3.864" x1="122.713" y1="179.063" x2="109.263" y2="114.707"/>
<path d="M122.57,178.51c0.305-0.063,0.603,0.129,0.667,0.433s-0.129,0.602-0.433,0.666c-0.303,0.064-0.601-0.129-0.666-0.433
C122.075,178.873,122.267,178.574,122.57,178.51"/>
</g>
</svg>
Thank you