Develop Reference

Create graphical element with selectable portions

I'm looking to create something like this using CSS:
As I hover over each colored section, I want to be able to change the color of the section and have a popup appear.
I know that using a canvas with an image map & clickable area coords is one way to tackle this, but I'm wondering if there is perhaps an easier way that would allow me to create the graphic with CSS and set a class for each piece of it.

You should use an SVG. The actual SVG markup can be embedded into your HTML as several grouped elements.
You can then wire up javascript events or target the elements with CSS :hover. Because the browser knows their exact shape, you can get pixel-accurate mouse overs.
circle:hover {
opacity: 0.5;
}
<svg width="500" height="500">
<circle id="circle1" cx="50" cy="50" r="20" fill="red"/>
<circle id="circle2" cx="150" cy="50" r="40" fill="green"/>
<circle id="circle3" cx="200" cy="50" r="30" fill="blue"/>
</svg>
Plenty of vector editing packages like Adobe Illustrator or Sketch can output SVG artwork. There are also online SVG editors.

svg animate tag changing

I am trying to make a rectangule in svg move down and them,when you tap it,to go to the right but it seems that it doesn't work.The console doesn't show any error.
Here is a JSFiddle:https://jsfiddle.net/troosfx8/
Update:Thanks for the answers.But now I want to know how can I make the second animation begin if a variable is 5 for example.Is there any way I can make a svg animation begin based on a condition?

There is a much simpler solution than how you are attempting to do it above.
All you need to do is add another <animate> element that begins on a click.
<svg width="360" height="400"
style="border:#9999ff dotted 7px; border-radius:12px;" >
<rect id="Rect" x="70" y="70" width="50" height="50"
style="stroke:yellow; stroke-width:5px; fill:orange;">
<animate id="pos" attributeName="y" from="70" to="140" dur="1s"
repeatCount="none" fill="freeze"/>
<animate id="pos" attributeName="x" from="70" to="140" dur="1s"
repeatCount="none" fill="freeze" begin="click"/>
</rect>
</svg>

SVG Hover State with Multiple Elements

Good afternoon everyone,
I'm defining an SVG on my page with the following defs.
<svg width="0" height="0">
<defs>
<g id="stroke-hexagon">
<polygon fill="#002663" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="12" points="57.8,185 5.8,95 57.8,5 161.8,5 213.8,95 161.8,185 "/>
</g>
<g id="hexagon">
<polygon fill="#006890" points="52,180 0,90 52,0 156,0 208,90 156,180 "/>
</g>
</defs>
</svg>
...and implementing it later in the HTML using this:
<svg width="208px" height="180px" viewBox="0 0 208 180" >
<use xlink:href="#hexagon"></use>
<text class="faicon" x="50%" y="70px" fill="white" font-size="80px" text-anchor="middle">&#xf040</text>
<text text-anchor="middle" x="50%" y="70%" fill="white">Logo Here</text>
</svg>
Works totally fine. I am also able to style the polygon's fill with simple CSS. Looks like this:
#hexagon:hover polygon {
fill:#990000;
}
The hover effect fails, however, whenever the mouse leaves the polygon and instead hovers over either of the 'text' elements within the svg. Is there a way to define a CSS rule that prevents this behavior. Or, would it be better (easier) to change the attribute using JS / jQuery?
Thanks!

Your texts are rendered on top of your polygon and are therefore intercepting mouse events. You should set up a css rule like
text {
pointer-events: none;
}
This will prevent the text from becoming a target of mouse events which should give you the desired hover effect for the polygon.

onclick not working when removing/appending child element

I have a simple *.svg file with some javascript code inside.
There are 6 circles and they partially overlay each other.
When a mousover event occurs for one of the circle, this circle should appear at the top.
This works just fine. Here is my code:
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="400" height="300">
<script>
function mouseOver(evt) {
var parent = evt.target.parentNode;
parent.removeChild(evt.target);
parent.appendChild(evt.target);
}
function click(evt) {
alert("CLICKED");
}
</script>
<g id="myCircles" stroke="none" onclick="click(evt)" onmouseover="mouseOver(evt)">
<circle id="circ1" cx="150" cy="100" r="50" fill="red"/>
<circle id="circ2" cx="100" cy="60" r="30" fill="yellow"/>
<circle id="circ3" cx="200" cy="150" r="80" fill="blue"/>
<circle id="circ4" cx="160" cy="190" r="70" fill="green"/>
<circle id="circ5" cx="100" cy="220" r="10" fill="gray"/>
<circle id="circ6" cx="80" cy="90" r="20" fill="black"/>
</g>
</svg>
However if I use this mouseOver function the onclick event doesn't work anymore. I guess this has something to do with the removing and appinding of the Element inside the DOM structure.
If i uncomment the code in mouseOver(evt), the onclick event gets fired.
Anyone knows how to solve this?
EDIT: Interestingly, when I am using onmousedown instead of onclick event, everything works fine! Can anybody explain why?

You could use the z-index property to bring the selected circle to the top. If you use a .css file, add the z-index and set the initial value to the same value (say, '1')
z-index:1;
on the mouseover event, change the z-index to a higher value (say, '5') to pop it to the top of the circle stack. on the mouseout event, reset z-index to 1 and, finally, use the mousedown event to produce your alert, "Clicked."

How to create SVG animation tag using javascript

I have this SVG circle with an animation.
<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" />
</circle>
It works fine. I want to make the exact same thing using javascript so if I click a button, it would create the same circle with the same animation.
here is my try:
var animateMotion = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");
animateMotion.setAttribute("dur","8s");
animateMotion.setAttribute("d", "M 0 0 H 300 Z");
animateMotion.setAttribute("repeatCount","indefinite");
//assuming that I already created my circle
myCircle.appendChild(animateMotion);

var animateMotion = document.createElementNS('http://www.w3.org/2000/svg','animateMotion');
animateMotion.setAttribute("dur","3s");
animateMotion.setAttribute("repeatCount","1");
var mpath = document.createElementNS('http://www.w3.org/2000/svg','mpath');
mpath.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#YourPath");
animateMotion.appendChild(mpath);

Looks like animateMotion elements are bugged in Webkit, when dinamically created (see SVG elements will not Animate when added dynamically), and unsupported in IE. I think you're better off using pure javascript animation using a library like d3.

Maybe this is your problem:
In XML:
<animateMotion path= ... />
In JS:
animateMotion.setAttribute("d", ... ); //Should this be "path"?
Hope it helps,
regards m93a.

If just the click is important, it can be solved by using the begin attribute in your animateMotion:
<svg height="500" width="500" id="foo">
<circle cx="30" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="8s" repeatCount="indefinite" begin="foo.click"/>
</circle>
</svg>
Should work with a button as well, if the button has an identifier, e.g. id="startbutton", then it should be begin="startbutton.click
Another alternative with inline javascript can be found here: http://svg-whiz.com/svg/PausePlay.svg
cheers

if you want the animate as soon as <animateMotion> element append page,
set <animateMotion> 'begin' to 'indefinite' and begin the animate call its .beginElement();
var animateMotion = document.createElementNS(SVG_NS, 'animateMotion');
animateMotion.setAttribute('begin', 'indefinite');
//append animateMotion to the page
animateMotion.beginElement();

Here you can get number of examples regarding svg using javascript.
You can get help from there.