Change SVG image color on hover
Question
I'm going straight to the "problem". I have an SVG map which represents Portugal. So what i want is: When I hover over a district (Ex. Lisbon) it changes color. Right now all the districts are grey, and I want them to be orange only when I hover over them.
I thought about connecting/calling a css file to run the a:hover{color: orange;} code for each on of the districts. However, it did not work. Why can't I use a <style> inside of a <path> ?
Right now I've got this code on my "Portugal.svg":
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet idhref="mystyle.css" type="text/css"?>
<html>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
baseprofile="tiny"
height="435.27365"
version="1.2"
viewbox="0 0 1000 597"
width="431.70035"
id="svg25"
sodipodi:docname="Portugal.svg"
style="fill:#7c7c7c;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
inkscape:version="0.92.1 r15371"
xmlns:style="http://www.w3.org/TR/SVG/mystyle.css">
<a xlink:href="http://www.artiroots.pt/devel-230b433e/wordpress/?s=Setubal">
<title>Setúbal</title>
<g>
<path
d="259......."
id="P....."
name="Setúbal"
fill="#7c7c7c"
inkscape:connector-curvature="0"
style="stroke-width: 0.100"
/>
</g>
</a>
</svg>
</html>
Thanks for your help, I really appreciate it!
1 answers
solution1
0 ACCPTED 2018-05-15 14:33:34
SVG and HTML are not so differents, so you can treat them on a similar way.
The first thing I see on your markup is that you have the fill attribute embed on the SVG code, if you want to change the color only using CSS you are going to use important! It would be better if you style the svg using CSS, then you could use the pseudo class "hover" to change the color.
path { fill: #ccc; } path:hover { fill: tomato; }
<svg id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000.45 494.44"> <title>map_svg</title> <g id="test-circle" class="cls-2"> <path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"/> </g></svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.