SVG Image Constraints

Question

I'm trying to make it so that when you hover over an image, the highlighted region stays within the image boundaries. Right now, the whole block just highlights, with the code for that below:

HTML

<body>
    <div id="maincontent">
        <div class="col">
            <a href="/"><img class="lightbulb" src="http://bit.ly/1FgI5wE"></a>
        </div>
    </div>
</body>

CSS

.lightbulb:hover {
    background-color: yellow;
}

I understand why this isn't what I want, so I went searching for a solution. The best one I found was at Hover effects on irregular polygons in CSS, but I'm running into problems as I'm trying to implement it. I tried replacing one of the country's paths with my image's path, but for some reason it's not showing up.

Please help me figure this out, or suggest a better solution! Thanks.

The file for my SVG image is below:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="203.000000pt" height="275.000000pt" viewBox="0 0 203.000000 275.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,275.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M770 2676 c-214 -57 -255 -76 -359 -165 -55 -47 -173 -215 -230 -329
-84 -167 -115 -326 -92 -480 24 -165 64 -292 132 -416 56 -101 121 -184 244
-311 68 -70 95 -107 132 -181 25 -51 49 -115 53 -141 7 -44 5 -51 -21 -81 -45
-51 -35 -104 23 -125 16 -6 15 -9 -7 -31 -34 -34 -33 -78 1 -105 l26 -20 -21
-27 c-59 -75 14 -126 179 -125 75 0 75 0 91 -32 19 -39 67 -59 124 -51 55 8
85 29 85 59 0 23 4 25 43 25 52 0 170 9 215 16 18 3 42 14 53 25 23 23 25 76
4 106 -14 21 -14 24 4 42 11 11 23 31 27 45 6 27 -17 80 -42 94 -15 8 -15 11
5 31 26 26 27 71 4 99 -22 24 -100 42 -188 42 l-63 0 -18 45 c-21 56 -16 198
11 293 16 55 22 65 51 77 37 15 111 87 134 129 16 32 5 59 -27 64 -26 4 -85
-62 -120 -133 -27 -55 -47 -67 -71 -43 -8 8 -7 17 7 37 49 70 52 145 5 157
-41 11 -79 -33 -76 -90 1 -24 6 -55 11 -68 17 -46 -23 -62 -80 -32 -27 14 -29
17 -17 32 23 28 38 71 38 110 0 64 -42 83 -79 36 -25 -32 -28 -96 -7 -136 14
-26 13 -29 -5 -38 -25 -14 -35 -7 -42 30 -8 40 -51 106 -83 126 -24 16 -27 16
-52 -3 -36 -27 -40 -69 -10 -113 30 -45 87 -83 115 -77 26 5 28 1 42 -105 11
-79 9 -119 -11 -223 -17 -92 -15 -90 -109 -94 -46 -1 -91 -7 -101 -12 -16 -9
-22 1 -18 34 0 1 -9 29 -20 61 -35 103 -88 187 -170 271 -191 194 -305 377
-346 550 -46 196 -52 275 -30 395 26 147 76 259 202 451 83 125 204 216 339
254 28 7 82 23 121 34 78 22 222 39 299 34 85 -5 226 -44 325 -90 52 -25 111
-52 130 -61 43 -20 160 -138 210 -212 54 -80 84 -151 126 -301 34 -125 37
-144 37 -274 1 -119 -3 -156 -26 -247 -38 -155 -76 -222 -229 -404 -95 -115
-145 -187 -204 -299 -44 -82 -69 -161 -53 -170 5 -3 11 7 15 22 22 100 111
252 251 426 123 154 172 225 200 292 18 44 28 80 63 238 23 106 4 286 -49 465
-54 181 -94 251 -217 379 -72 75 -89 87 -199 138 -66 32 -165 70 -220 86 -86
25 -116 29 -220 28 -103 0 -137 -5 -245 -33z m248 -1444 c4 -26 -26 -122 -38
-122 -20 0 -26 86 -8 125 14 31 42 29 46 -3z m160 -12 c1 -14 -9 -47 -22 -75
l-24 -50 -11 28 c-23 60 -6 130 32 125 15 -2 23 -11 25 -28z m-343 -16 c22
-24 70 -132 62 -140 -11 -12 -80 22 -106 52 -62 71 -19 156 44 88z m525 16 c0
-24 -32 -70 -76 -109 -43 -37 -71 -53 -62 -33 25 55 63 114 84 131 29 23 54
27 54 11z m-361 -154 c19 -22 67 -29 98 -14 24 11 33 11 59 -3 29 -14 31 -17
19 -40 -33 -62 -45 -266 -20 -326 8 -20 14 -37 13 -38 -2 -1 -60 -5 -129 -9
l-126 -6 13 57 c23 98 26 192 10 278 -8 44 -11 81 -7 83 5 1 17 9 27 17 24 18
29 18 43 1z m416 -470 c31 -21 33 -61 4 -93 l-22 -22 32 -33 c17 -17 31 -42
31 -55 0 -23 -32 -63 -50 -63 -5 0 -10 -7 -10 -15 0 -8 4 -15 10 -15 5 0 16
-13 25 -29 15 -31 9 -71 -14 -86 -20 -12 -185 -24 -411 -30 -186 -4 -235 -3
-285 10 -32 9 -61 18 -64 20 -2 3 -4 18 -4 35 0 20 9 38 28 54 l28 24 -36 16
c-48 19 -50 55 -7 98 34 34 33 43 -9 51 -41 9 -56 39 -37 75 24 46 39 53 143
63 288 28 601 26 648 -5z m-314 -499 c-28 -29 -120 -30 -150 -3 -40 37 -27 45
72 48 101 3 117 -6 78 -45z"/>
<path d="M941 469 c-90 -5 -166 -11 -170 -15 -8 -9 466 5 509 16 45 10 -113
10 -339 -1z"/>
<path d="M985 310 c-99 -4 -181 -8 -182 -9 -11 -5 0 -22 12 -17 8 3 119 6 245
7 150 1 230 5 227 12 -4 14 -87 15 -302 7z"/>
</g>
</svg>

score 0 · Answer 1 · answered Sep 17 '15 at 09:54

If you only want part of your SVG image to change colour, then you can't just change the background colour of the whole image and expect it to figure out which parts to apply this colour to.

I suggest you keep things simple to start with. Get rid of the <img> element and put the SVG data directly inside your HTML file. Then you can use CSS rules to modify the appearance of individual SVG elements.

Here's a basic example to get you started:

#bulb #glow { fill:#999; }
#bulb:hover #glow { fill:#fd0; }

<svg id="bulb" width="100" height="100" viewBox="0 0 100 100">
  <circle id="glow" cx="50" cy="40" r="37" fill="#999" />
  <path d="M33 33 45 75ZM55 75 68 32Z"
        stroke="#000" stroke-width="3" stroke-opacity="0.5"/>
  <rect x="30" y="71" width="40" height="29" fill="#e70"/>
</svg>

SVG Image Constraints

1 Answers1