SVG图像约束

我试图让它悬停在图像上时，突出显示的区域保持在图像边界内。眼下，整个街区刚刚凸显，同时，对于下面的代码：SVG图像约束

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>

来源

2015-09-16 user5343788

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

我建议你先让事情变得简单。摆脱<img>元素，并将SVG数据直接放入HTML文件中。然后，您可以使用CSS规则修改单个SVG元素的外观。

这里有一个基本的例子，让你开始：

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

来源

2015-09-17 09:54:25

回答

相关问题