Question

我试图将其设置为当您将鼠标悬停在图像上时，突出显示的区域会保留在图像边界内。现在，整个块只是突出显示，代码如下：

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;
}

我理解为什么这不是我想要的，所以我去寻找解决方案。我找到的最好的是Hover effects on irregular polygons in CSS，但是我试图实现它时遇到了问题。我尝试用我的图像路径替换国家/地区的一条路径，但出于某种原因它没有出现。

请帮我解决这个问题，或建议更好的解决方案！感谢。

我的SVG图像文件如下：

<?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>

Answer 1

如果您只想要部分SVG图像改变颜色，那么您不能只改变整个图像的背景颜色，并希望它能找出应用这种颜色的部分。

我建议你开始时保持简单。摆脱<img>元素并将SVG数据直接放在HTML文件中。然后，您可以使用CSS规则修改单个SVG元素的外观。

以下是帮助您入门的基本示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

SVG图像约束

1 个答案: