0

I'm going to use this example as a guide for my next project: https://parall.ax/examples/svg_map

The creator has used an SVG with active elements placed overtop of a PNG image. What i'd be interested to know is whether I can include an SVG with non-active elements or 'paths'?

I'd like certain elements to do nothing when either 'hovered' or 'clicked'. So they will add to the overall picture but not be active.

Any help would be very much appreciated. Thanks.

Fra
  • 393
  • 7
  • 19
  • Of course you can add svg objects, which are just being rendered and can't be influenced by interaction. – rojadesign Jul 04 '18 at 13:29
  • Would you do this by checking a colour or the specific path id and making an if() statement? Sorry - very new to this. – Fra Jul 04 '18 at 14:49
  • It's fine, we are all new to things we didn't know before :) I would rather work with the svg file, because it's powerful in it self, so no JavaScript is needed for animation, fade, etc. Checkout this site to learn everything about svg: https://developer.mozilla.org/en-US/docs/Web/SVG – rojadesign Jul 05 '18 at 05:57

1 Answers1

0

Personally, I wouldn't follow that example. The person that created that used quite a complicated way of achieving that result. There are much simpler ways.

For instance, here's a simplified SVG map with a little bit of CSS. Only the rectangles with the class "hoverable" have the roll-over effect.

Obviously, if you want to handle clicks, you are going to have to add a click handler to the map regions also.

.hoverable:hover {
  fill: blue;
}
<svg width="400" viewBox="0 0 100 100">
  <rect x="50" y="10" width="20" height="20" fill="red"/>
  <rect x="50" y="31" width="30" height="20" fill="orange" class="hoverable"/>
  <rect x="30" y="52" width="55" height="20" fill="gold" class="hoverable"/>
  <rect x="10" y="73" width="30" height="20" fill="indianred"/>
  <rect x="41" y="73" width="30" height="25" fill="darkorange" class="hoverable"/>
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181