| Newsgroups |
gmane.text.xml.svg.devel |
| Message-ID |
<[email protected]> |
I'll be very happy to any idea. For two weak search a solution)
We've got a simply code, which works cross-browser:
<html> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="100"> <circle id="circ" cx="120" cy="40" r="30" fill="green"/> <rect id="rect" x="10" y="10" width="60" height="60" fill="blue"> <set attributeName="fill-opacity" to="0.5" begin="circ.mouseover" end="circ.mouseout"/> </rect> </svg>
When I try to use the elements in defs block I'm losing relation between two rectangles in Fire Fox browser.
<html> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="100"> <defs> <circle id="circ" cx="120" cy="40" r="30" fill="green"/> <rect id="rect" x="10" y="10" width="60" height="60" fill="blue"> <set attributeName="fill-opacity" to="0.5" begin="circ.mouseover" end="circ.mouseout"/> </rect> </defs> <use id="use_circ.rectangles" xlink:href="#circ" /> <use id="use_rect.rectangles" xlink:href="#rect" /> </svg>
I've read something about relation here http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs? , actually this words "Note that this effect does not work in Firefox Firefox 6 and earlier (I think), which is perhaps the biggest drawback of this method. "
I need to press the button to move(change) another element. I also tried to make something like this, to set relation effect:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Button</title> <script type="text/javascript" language="javascript"> function turn_right(button, miliSec) { document.getElementById("circ_left_position").setAttribute('visibility','hidden'); setTimeout(function() { button.parentNode.setAttribute('xlink:href','#rect.right_position'); }, miliSec); document.getElementById("circ_right_position").setAttribute('visibility','visible '); } function turn_left(button, miliSec) { document.getElementById("circ_right_position").setAttribute('visibility','hidden '); setTimeout(function() { button.parentNode.setAttribute('xlink:href','#rect.left_position'); }, miliSec); document.getElementById("circ_left_position").setAttribute('visibility','visible '); } </script> </head> <body style="margin:0; border:0"> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="100"> <defs> <g id="rect.left_position" onclick="turn_right(this,500)"> <rect x="10" y="10" width="60" height="60" fill="blue"/> <circle id="circ_left_position" cx="120" cy="40" r="30" fill="green"/> <animateTransform id="trigger1" begin="click" attributeName="transform" type="rotate" additive="replace" from="0 70 70" to="10 70 70" dur="0.5s" fill="freeze" /> </g> <g id="rect.right_position" onclick="turn_left(this,500)"> <rect x="10" y="10" width="60" height="60" fill="blue" transform="rotate(10 70 70)"/> <circle id="circ_right_position" cx="120" cy="40" r="30" fill="green"/> <animateTransform id="trigger1" begin="click" attributeName="transform" type="rotate" additive="replace" from="0 70 70" to="-10 70 70" dur="0.5s" fill="freeze" /> </g> </defs> <use id="positions.rectangles" xlink:href="#rect.left_position" /> </svg> </body>
In Chrome anf FF we get diffrent results. Farther, i don't understand difference in browsers. I'm sure, there exist a simple solution. it's my account on stack with the same topics and some interesting answers