SVG Hower on regions

by jmeile

HTML

<svg id="my-svg" width="1000" height="1000">
  <a xlink:href="https://en.wikipedia.org/wiki/Circle">
    <circle cx="300" cy="300" r="200" />
  </a>
</svg>

CSS

/*
 * Please note that those paramaters can be also set on html,
 * for example:
 * <svg id="my-svg" width="1000" height="1000">
 *   <circle cx="300" cy="300" r="200"
 *           fill-opacity="0" stroke="#00ff00" stroke-width="3" />
 * </svg>
 *
 * Note: never set fill to "none"; otherwise, hovering won't
 * work. Instead use: fill-opacity and set it to zero.
 *
 */
#my-svg * {
  fill-opacity: 0;
  stroke: #00ff00;
  stroke-width: 3;
}

/* This will setup hover on all svg shapes, not only circles */
#my-svg *:hover {
  fill: red;
  fill-opacity: 0.5;
}

/* You may use this instead if you only want to have
   hover on circles
 */
/*
#my-svg circle:hover {
  fill: red;
  fill-opacity: 0.5;
}
*/

/* Finally, if you don't want to work with all shapes or all circles,
 * then you can use ids for the internal shapes, for example:
 * <svg width="1000" height="1000">
 *   <circle id="my-circle" cx="300" cy="300" r="200" />
 * </svg>
 */
/*
 #my-circle {
  fill-opacity: 0;
  stroke: #00ff00;
  stroke-width: 3;
}
*/

/* You can also use classes, for example:
 * <svg width="1000" height="1000">
 *   <circle class="my-circle" cx="300" cy="300" r="200" />
 * </svg>
 */
 /*
 .my-circle {
  fill-opacity: 0;
  stroke: #00ff00;
  stroke-width: 3;
}
*/