1

I'm trying to make certain paths of an svg change color on hover, but something seems to be really buggy about my code. When I try to add, for example, an inline .svg circle, it doesn't even appear, although text does. Hover doesn't work at all, I've tried a few different ways of doing it.

Here's my HTML:

<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <title>User Map</title>
</head>
<body>
  <div id="map">
    <img style"width: 60%" src="world.svg" />
  </div>
</body>
</html>

My CSS:

#map {
  background:#3B475C;
  position: relative;
  width: 75%;
  top: 15%;
  left: 12.5%;
  display: block;
  }

.dot:hover {
  fill: #000 !important;
}

And a link to my .svg, since it's large: scratchpad.io/anxious-frogs-1845

Here's the general logic behind the code right now: world.svg is the image in the div. I don't want countries to change color, just pins that I'm putting on top of the map (although even when I try to apply :hover to just the whole thing, nothing happens). I'm trying to apply the "dot" class to all the pins, then in CSS, have all the dots have a hover function. I'm really confused as to why whole sections of code aren't doing anything, especially because they work fine when I've tried putting them in other test programs. If there's a way to maybe put the pins in another, overlaid SVG I could do that, but I'm not sure how to (it doesn't show up if I add a second svg and link it into the HTML) and that still doesn't explain why hover won't work and circles, etc don't show up when I add them to the html.

I'd really appreciate any help, I'm new to html and css (I've only used Java and Python before) and am pretty stuck on this problem.

Ramon Balthazar
  • 3,907
  • 3
  • 25
  • 34
strangestquark
  • 75
  • 8
  • where is the element with a class dot? Also if you want to style the svg, don't you just include the svg ([see this](https://jsfiddle.net/russambiata/4vzaj91c/)) instead of an image tag with the svg as it's source? – Pete Jul 12 '18 at 14:42
  • Pete- this is my first html project so I honestly just didn't know that was the requirement for this to work. I figured having the svg separate would make the main html file easier to work with. – strangestquark Jul 13 '18 at 15:52

1 Answers1

0

Short answer: You can't style a SVG via the img tag. You need to put the SVG code inline.

<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <title>User Map</title>
</head>
<body>
  <div id="map">
    <svg ...>
       <!-- svg content -->
    </svg>
  </div>
</body>
</html>

Explanation: The img tag renders the SVG as a bitmap, so the SVG elements are not in the DOM and can't be selected through CSS.

Ramon Balthazar
  • 3,907
  • 3
  • 25
  • 34