Question 244092 in Html Question posted in
Some basic documentation can be found here.

Html – Modify the fill colour of an SVG on hover

I am looking at this svg from wikipedia link – I have downloaded this to a simple html page locally. I noticed each area of the map had an id, so I thought I could use this to target the area and change the colour on hover. It sounded simple enough, but so far nothing.

First I tried to load the file as an object using <object type="image/svg+xml" data="map.svg"></object> (which does display fine and does allow me to see the individual areas) but when I try to target this using the following CSS, nothing is happening:

#Queens path {
  fill: yellow;
}

(I also tried path#Queens as this is what is shown on dev tools when I target the area.

I’ve also tried brining the entire file into my html (which is messy) – but I am at a loss. Nothing is triggering a change on hover.

Tags:

2

Answers


  1. 0

    No need to use <object>, you can include the svg directly in the html file. Since it has inline styles for fill you’ll need to use !important to override it on hover. Example (I’ve simplified the svg for characters limit):

    path {
  transition: fill .5s;
}

path:hover {
  fill: red !important;
}
    <svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" id="svg2" sodipodi:version="0.32" inkscape:version="1.2.2 (732a01da63, 2022-12-09)" width="534.75348" height="530.19269" version="1.0" sodipodi:docname="1993 New York City Democratic mayoral primary election results map by borough.svg" xml:space="preserve"><g inkscape:groupmode="layer" id="layer1" inkscape:label="main area" transform="translate(-20.777794,-9.75)" style="fill:#808080;fill-opacity:1"><path style="fill:#584cde;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" d="m 337.09783,57.802755 -2.668,1.421638 -2.49273,3.914362 -1.06461,4.978973 0.70757,0.714061 -1.5969,2.486241 0.35702,0.357033 c 0,0 -10.49552,17.958167 -11.02903,18.669518 -0.5335,0.711337 -2.13313,1.424348 -2.31097,2.135692 -0.17784,0.711344 0.88934,6.578597 0.88934,7.289941 0,0.711346 -3.55733,11.204306 -3.55733,11.204306 0,0 -4.44414,10.31905 -4.62194,11.38607 -0.17785,1.06701 -4.08965,6.04357 -4.08965,6.04357 l -1.07109,-0.5323 -3.55734,4.79721 0.88933,0.71406 -1.23987,2.668 -24.18727,45.16776 -2.13569,0 -0.53233,1.0711 2.31097,0 -0.17526,0.70757 -1.42812,0 -2.84327,4.8037 1.42165,0 -0.88935,1.6034 -2.1292,-0.88934 -2.668,4.79722 2.12921,1.07109 -0.53233,1.0646 -2.31097,-1.0646 -4.97895,9.95794 2.1357,0.88933 -0.71408,1.06461 -1.59689,-0.88934 -3.55733,4.44667 1.0646,0.35703 -0.53231,1.06461 1.77868,0.35702 -0.88934,2.31097 -1.95395,-0.5323 -1.60338,4.26491 1.60338,0.88935 -1.07108,2.66799 -1.0646,0 -1.60341,8.89333 1.42165,0.5323 0.71406,2.13572 -1.6034,0 0,1.06459 2.668,0 0,1.60339 -3.01855,-0.35702 -0.71405,4.62194 3.2003,0.18176 -0.35705,2.84325 -2.66799,-0.88933 -0.35053,3.02504 3.01852,0.88934 -0.35052,4.44666 -3.73909,-0.5323 -4.08966,26.84879 2.49273,-0.17526 c 0,0 -0.35702,1.0661 -0.35702,2.31097 0,1.24482 2.31097,2.66799 2.31097,2.66799 0.35567,0.35567 1.24649,0.35311 2.13571,0.17526 0.88915,-0.1778 1.59688,-0.70756 1.59688,-0.70756 l 0.88935,1.5969 1.42813,0 -0.71406,-2.13571 1.24636,-0.70756 1.95393,1.42165 6.04358,-6.04359 -1.42165,-1.60341 3.73909,-2.66799 6.40064,-0.88934 0.17525,1.42165 9.95794,-1.5969 0,-0.71407 c 0,0 1.77763,-0.8907 3.2003,-1.24637 1.4227,-0.35567 2.67073,-6.39956 3.38207,-7.82223 0.71134,-1.42271 2.31096,-13.15976 2.31096,-14.40462 0,-1.24484 -2.66798,-3.55734 -2.66798,-3.55734 l 0.18176,-4.97897 1.23986,0.71408 0,-1.96044 c 0,-0.71131 -0.17511,-5.86605 0.71407,-7.82224 0.88917,-1.95619 3.02413,-6.22458 5.336,-9.42564 2.31186,-3.20103 4.44701,-7.11634 6.22533,-9.25037 1.77837,-2.13402 6.57468,-8.71309 7.10819,-9.95793 0.5335,-1.24485 8.18198,-11.55757 8.89333,-12.26891 0.71134,-0.71134 -0.17543,-3.91211 -1.0646,-5.86831 -0.88918,-1.95619 -0.532,-3.20318 1.24636,-4.8037 1.77836,-1.60052 3.90787,-3.55749 3.90787,-4.44667 0,-0.88917 1.78019,-4.79872 3.02504,-6.04357 1.24484,-1.24485 4.26506,-3.37709 5.15424,-4.62194 0.88918,-1.24485 -0.17529,-5.51808 -0.17529,-7.29643 0,-1.77836 -1.60234,-4.26658 -3.025,-6.4006 -1.42271,-2.13403 -1.59693,-3.73548 -1.59693,-5.33601 0,-1.60052 0.53232,-4.79751 0.53232,-6.57587 0,-1.77836 -0.53623,-9.42972 -0.71409,-10.49673 -0.17779,-1.06702 -0.70755,-10.31393 -0.70755,-11.73661 0,-1.42268 1.42044,-5.50886 1.95392,-6.57588 0.53353,-1.06701 5.3336,-12.626247 6.40063,-14.404608 1.06699,-1.778352 4.27034,-8.001745 5.69302,-9.957941 1.42269,-1.956188 3.91079,-6.050369 5.51126,-7.828728 1.60054,-1.778355 3.02248,-5.690776 3.20032,-7.64697 0.17783,-1.956194 0.005,-3.201662 -1.23987,-3.557335 -1.24486,-0.355674 -3.73546,-1.242595 -5.33602,-1.953937 -1.60048,-0.711348 -3.02501,-0.357188 -3.02501,-1.246366 0,-0.889177 -1.24636,-1.778669 -1.24636,-1.778669 l -3.01855,-0.532301 z m 2.05781,95.165185 c -0.68966,-0.006 -1.25557,0.0413 -1.5385,0.51283 -0.37726,0.62875 -1.3827,2.89539 -1.3827,3.90138 0,1.006 0.25318,1.88439 0.25318,3.14188 0,1.25749 -0.87652,3.14133 -1.88252,4.52457 -1.006,1.38323 -3.1493,3.52099 -3.77806,4.40123 -0.62875,0.88024 -2.13253,3.65081 -2.63554,4.53106 -0.50299,0.88024 -0.63191,3.01372 0.49986,3.26521 1.13171,0.2515 2.7639,0.75709 3.51837,0.88285 0.7545,0.12574 2.13977,1.38101 2.26553,1.12952 0,0 1.13453,1.13099 1.88901,0.3765 0.75449,-0.75449 1.63198,-1.37786 2.51222,-1.62936 0.88024,-0.2515 2.13569,-0.75561 2.13569,-1.63586 0,-0.88024 1.88754,-6.16061 2.64205,-7.1666 0.75448,-1.00599 4.77773,-3.77582 4.77773,-4.90756 0,-1.13174 -1.38361,-4.90442 -2.01237,-5.40741 -0.62874,-0.503 -3.89748,-3.64673 -4.77773,-4.40123 -0.88024,-0.75449 -0.75318,-1.50602 -1.75918,-1.50602 -0.25149,0 -0.49717,-0.011 -0.72704,-0.013 z M 323.7059,188.6841 c -0.0958,0.0137 -0.23335,0.0946 -0.42196,0.25966 -1.00598,0.88025 -2.7639,1.75697 -3.51839,2.88871 -0.75448,1.13174 -0.75633,2.64296 -1.25934,3.27171 -0.503,0.62874 -2.39056,2.64464 -2.64203,3.52488 -0.25152,0.88024 -2.76463,3.64673 -3.14188,4.40123 -0.37725,0.75449 -1.3827,1.75604 -1.3827,2.25904 0,0.50299 -2.26647,3.52507 -2.8952,4.53105 -0.62875,1.00599 -3.39505,4.39975 -3.39505,5.15424 0,0.75449 -2.01235,4.02472 -2.01235,4.02472 l 0.25316,1.00617 c 0,0 1.7618,-2.89443 2.64202,-3.27171 0.88025,-0.37721 2.76874,-3.14687 3.27172,-3.90137 0.50301,-0.75449 2.38571,-2.76389 2.88872,-3.51838 0.50299,-0.7545 -0.12632,-0.87989 1.38269,-2.38887 1.50897,-1.50898 6.79176,-9.17916 7.04326,-10.18515 0.25149,-1.00598 1.50936,-1.38046 2.01236,-2.5122 0.50299,-1.13174 1.25935,-1.88847 1.25935,-3.27171 0,-1.12388 0.33068,-2.33108 -0.0844,-2.27202 z m -96.11945,92.80877 -3.51838,4.02472 2.64202,1.88903 1.7592,-2.14218 1.51251,0 0.37652,-1.62936 -2.77187,-2.14221 z m 21.60366,8.85439 c -0.47451,-0.002 -0.86778,0.0308 -1.10355,0.0779 -0.50623,0.10127 -1.33865,0.44248 -1.51252,0.37653 -0.0109,0.31707 -0.10537,1.71806 -0.99967,2.38886 -1.00603,0.75446 -3.77491,3.77414 -4.2779,4.65438 -0.50301,0.88025 -1.00451,2.51071 -0.75302,3.26523 0.2515,0.75447 1.51026,1.75919 2.64205,1.75919 1.13172,0 6.53542,-4.90106 7.28993,-4.90106 0.75449,0 1.63845,0.49967 2.51869,-0.50636 0.88023,-1.00597 0.87965,-1.50937 1.3827,-2.01234 0.50295,-0.50304 0.37148,-1.88513 -0.38301,-2.76539 -0.75448,-0.88021 -0.75247,-1.63514 -2.13568,-2.01234 -0.86457,-0.23582 -1.87718,-0.32211 -2.66802,-0.3246 z m -2.61607,0.45443 c 0.002,-0.0396 0.007,-0.12983 0.007,-0.12983 -0.049,0.0735 -0.0485,0.11383 -0.007,0.12983 z m -24.26517,3.39503 c -1.00599,0 -1.25601,0.75391 -0.75302,1.3827 0.50301,0.62873 0.75395,1.50529 1.3827,1.88251 0.62874,0.37729 1.50845,0.50468 1.38267,0.25318 0,0 1.63494,4.8e-4 1.00619,-1.38268 -0.62875,-1.38328 -2.01255,-2.13571 -3.01854,-2.13571 z" id="Manhattan" inkscape:connector-curvature="0"/><path style="fill:#584cde;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" d="m 350.95066,10.252618 c 0,0 -1.75921,6.2923 -1.75921,8.555778 0,2.26348 -2.01402,5.527786 -2.26552,7.036771 -0.2515,1.508987 -2.2672,8.048152 -2.5187,9.808636 -0.25149,1.760483 -2.76221,10.816675 -3.26522,12.074165 -0.50298,1.257487 -2.76536,8.049443 -2.76536,8.049443 0,0 1.50933,-0.0048 2.01234,0.246674 0.503,0.251499 1.25807,2.138299 3.01856,3.018542 1.76047,0.880243 3.01632,1.1336 4.14804,1.259352 1.13176,0.125747 4.39976,1.130635 5.15427,2.765369 0.75449,1.634739 0.37649,3.645995 0.37649,4.777737 0,1.131736 -1.134,4.653295 -3.27172,7.41977 -2.13772,2.766473 -5.15274,7.041041 -5.90722,8.172778 -0.75452,1.131737 -2.13663,4.652913 -2.7654,5.407414 -0.62873,0.754487 -3.14614,5.033687 -4.27788,6.919918 -1.13174,1.886232 -3.1452,7.042715 -3.64821,8.425945 -0.503,1.38324 -2.76056,6.15914 -3.01206,7.91962 -0.2515,1.76049 0.3741,6.03746 0.49984,8.04944 0.12576,2.01198 0.87874,8.67375 0.75301,10.30848 -0.12576,1.63473 -0.12576,8.29872 0,9.17897 0.12573,0.88023 0.12503,4.28049 0.37653,5.16073 0.2515,0.88023 1.63677,4.02324 2.26552,4.77773 0.62875,0.75449 1.88346,3.14355 2.51221,3.39505 0.62875,0.2515 2.64203,0 2.64203,0 0,0 0.87968,-0.13057 1.38269,0.24668 0.50297,0.37724 2.14217,2.14218 2.14217,2.14218 l 3.51841,3.39505 c 0,0 1.51197,1.12952 2.89518,1.12952 l 1.3827,0 c 0,0 -0.002,0.38113 1.75918,-0.87635 1.76051,-1.25749 3.39356,-4.02899 4.14807,-5.16074 0.75449,-1.13173 1.38288,-4.14806 2.38887,-4.14806 1.00598,0 2.01236,-0.12593 2.01236,-1.00617 0,-0.88025 1.00656,-1.00618 3.01855,-1.00618 l 5.4074,0 c 1.63473,0 2.88963,0.002 3.51838,1.25935 0.62873,1.25749 2.89446,4.52864 3.27171,4.6544 0.37724,0.12574 2.26573,-1.25936 3.27171,-1.25936 1.00598,0 5.27759,0.49985 5.27759,0.49985 l 0.25316,0.75951 1.12952,0.37649 0,1.25287 c 0,0 2.51556,-0.2517 3.01852,-1.00618 0.503,-0.7545 3.52489,-6.53693 3.52489,-6.53693 l -2.76537,-7.54311 -1.136,-1.63585 -6.28376,-2.64204 -2.26554,-2.38887 0.88285,-1.12952 2.38886,2.26554 6.41359,2.5122 3.39504,5.15424 4.6479,0.50633 1.13602,-0.7595 2.38887,0 0.62966,2.77187 -0.38298,2.76537 2.26554,5.15424 8.80245,-2.01236 -0.87636,-3.01854 0.12335,-1.63586 -2.26555,-1.25285 0,-1.25935 1.38271,-3.01854 -2.7654,-2.01236 -1.25933,0.12333 -2.88871,-1.00618 -0.12984,-1.50603 0.50634,-0.88283 0.62966,1.76568 2.01239,1.00618 1.63585,-0.25317 3.14188,2.38887 0.75301,2.76537 0.88284,0 0.12333,-1.63585 c 0,0 0.75229,-1.00229 1.12952,-1.88253 0.37725,-0.88025 0.12592,-3.4008 1.00619,-3.77805 0.8802,-0.37725 1.26101,-0.12112 1.5125,-1.25285 0.2515,-1.13174 0.24762,-2.39054 0.87637,-2.64203 0.62874,-0.2515 0.88284,-1.12952 0.88284,-1.12952 l -2.13571,-10.43832 4.14805,8.17278 c 0,0 -1.88494,5.40426 -1.75918,5.90725 0.12573,0.503 0.50058,2.01589 0.12333,3.52488 -0.37724,1.50899 -0.25316,3.51839 -0.25316,3.51839 l 2.26553,6.66676 5.53076,0.87635 1.13599,-7.03678 4.90106,-0.12982 c 0,0 2.5172,-1.63104 3.27171,-1.88254 0.75451,-0.2515 5.15426,-1.38268 5.15426,-1.38268 l 6.66675,1.25286 5.15424,5.16073 2.38887,-0.25317 3.90137,3.27171 c 0,0 2.00775,-0.12797 3.26523,1.12952 1.2575,1.25749 2.39146,2.26459 3.2717,1.63585 0.88026,-0.62875 1.25844,-2.26404 0.62967,-3.01854 -0.62873,-0.75449 -6.91433,-4.53106 -7.54308,-4.53106 -0.62874,0 -1.88756,-0.24668 -2.64205,-0.24668 -0.75451,0 -1.76253,-1.89069 -2.26552,-2.14218 -0.50299,-0.2515 -1.00785,-1.00396 -1.25937,-2.1357 -0.25149,-1.13174 -1.50603,-3.39505 -1.50603,-3.39505 l 2.88873,2.8952 c 0,0 0.002,2.01069 0.88284,1.75919 0.88024,-0.2515 2.64202,-2.26552 2.64202,-2.26552 0,0 0.37913,-1.13361 1.25938,-1.25935 0.88024,-0.12575 1.63324,-0.87561 0.753,-1.25287 -0.88023,-0.37724 -4.02472,-2.38886 -4.02472,-2.38886 l -1.63585,0.24668 -2.1357,-2.51221 -1.3827,-6.53692 -0.88285,-0.50633 -2.76535,1.63585 -2.38887,0.62967 -0.25318,-2.8952 1.12952,-1.63586 -2.25903,-4.2714 -0.88285,-4.77773 -0.12333,-5.0309 1.63586,-0.37651 -1.13602,-4.15454 -1.63585,-1.62937 1.38917,-0.62967 1.3827,1.00617 -0.12983,-2.765367 -1.12954,-0.882849 c 0,0 -0.63207,-1.259535 -0.50631,-2.265519 0.12573,-1.005992 0.62966,-1.382692 0.62966,-1.382692 0,0 0.004,-2.512204 -0.49984,-2.512204 -0.50299,0 -1.26175,-0.629858 -1.13601,-1.635857 0.12576,-1.005985 0.62966,-2.1357 0.62966,-2.1357 l -2.5122,-3.901384 3.77157,-1.63585 0.12333,-3.265218 -3.01856,-0.129827 -1.75918,-3.265219 -0.3765,-5.407408 -1.75921,-1.259352 -1.75918,-6.536927 c 0,0 2.89039,-9.18082 3.14188,-10.438307 0.2515,-1.257489 -0.12333,-3.901383 -0.12333,-3.901383 l 1.38268,-0.376507 0.24668,2.135699 c 0,0 -0.49745,6.042092 -0.62318,6.796588 -0.12576,0.754491 -1.51254,1.75919 -1.51254,1.75919 l 0.37653,1.006183 -0.49985,1.88253 0.49985,1.382687 -0.87636,1.382687 0.24668,3.27171 2.26554,1.75919 1.38267,1.382686 c 0,0 -0.24815,-1.506953 0.50634,-2.135698 0.75449,-0.628743 1.50602,-1.129518 1.50602,-1.129518 l 0.25316,2.512206 0.75302,0.129828 -2.01235,3.265217 -0.12335,1.759194 1.75921,-0.753011 0,2.012358 1.12949,-1.129518 2.64205,1.635855 3.52489,5.654085 0.24665,-2.888714 1.63586,-0.629677 0.75301,0.123346 -0.75301,7.926106 0.88284,0.123331 0.12335,1.50603 -0.62966,0.253166 3.64819,3.771557 1.3827,3.148369 c 0,0 0.25168,-2.389801 1.00617,-3.018542 0.75448,-0.628749 1.3827,-1.004702 1.3827,-1.759196 0,-0.754494 -1.25358,-2.640552 -0.87634,-3.395046 0.37725,-0.754494 1.50286,-2.267194 2.00585,-2.518692 0.503,-0.251498 1.76569,-1.129519 1.76569,-1.129519 l 0.62966,-2.895203 c 0,0 2.00588,-1.885877 2.00588,-2.388873 0,-0.502991 1.136,-8.672623 1.136,-8.672623 0,0 2.6415,-0.632273 4.02472,-1.512516 1.38326,-0.880242 2.63557,-1.760121 2.63557,-2.388865 0,-0.628749 0.63116,-1.383619 -0.12336,-2.012363 -0.75448,-0.628744 -1.88586,-0.499843 -2.38886,-0.499843 -0.50299,0 -1.25935,-0.506336 -1.25935,-0.506336 0,0 2.5187,-4.274002 2.5187,-5.154239 0,-0.880243 -0.88301,-2.5187 -1.88901,-2.5187 l -3.14188,0 0.62966,-2.135698 -2.01235,0.506336 -0.12984,0.876352 -1.88253,0.75301 -1.12952,2.142191 0.87634,1.00618 -1.1295,4.901071 -2.38887,0.882844 -4.40124,8.672624 -0.88284,0 -0.25316,-2.012357 -1.62935,0.382996 0,-1.765684 -4.15456,-3.395049 4.90757,2.895202 0.87634,-0.376503 0.62968,-1.889023 1.88902,-2.388866 -0.62969,-0.499848 2.38887,-2.142186 1.3827,0 0.25315,-2.259038 1.3827,-3.395049 -0.37651,-2.012358 1.00619,0 1.75919,-3.52488 -28.91957,-9.555467 0,1.635854 -14.83955,-5.530746 -1.136,-4.27789 0.50633,-2.512205 c 0,0 -1.13525,-1.639385 -1.5125,-3.148371 -0.37728,-1.508986 -0.87637,-2.512205 -0.87637,-2.512205 l -3.01853,0 -0.37653,-1.635854 -4.90755,-2.388867 -0.75302,1.129518 -1.88251,-1.506025 1.75919,-2.895203 -1.75919,-0.123338 -1.13602,1.506025 -0.75301,1.259348 0.88284,1.006181 c 0,0 -1.00636,1.256937 -2.01236,1.382686 -1.00598,0.125749 -0.88284,1.759193 -0.88284,1.759193 l 0,1.635854 -1.50602,1.635855 -0.75952,0.376506 0,1.512517 -2.5122,-0.629675 -46.77764,-18.111246 z m 134.42569,68.783789 -1.63585,0.629669 0,8.932287 -0.25318,0.876353 1.51253,3.141881 -0.62969,3.018541 2.88873,3.018535 1.63585,0 -0.75302,-1.63585 -1.25935,-1.629361 0.62967,-3.395046 0.12335,-4.154557 0.88284,-1.382684 2.64205,-0.499843 -5.78393,-6.919925 z m -18.11125,2.012361 c -0.50299,0 -0.87633,0.759504 -0.87633,0.759504 l -0.88285,0.376503 -0.37653,1.006181 -0.12332,1.006181 -0.75952,0.376503 3.27171,5.907257 -0.37648,1.382684 -0.37653,1.635858 c 0,0 -1.136,2.013289 -1.136,2.642038 0,0.628741 2.01403,2.892049 2.26554,3.395045 0.2515,0.502998 -0.62709,1.758448 0.25316,2.135688 0.88025,0.37726 1.50602,1.76014 1.50602,2.38888 0,0.62875 1.38436,1.00637 1.63586,2.01236 0.25149,1.00599 0.002,1.50862 0.88284,2.38886 0.88022,0.88024 1.25378,1.01008 1.88253,0.12984 0.62876,-0.88025 1.88978,-1.63531 1.51251,-3.01854 -0.37722,-1.38325 0.2489,-3.27264 -0.88285,-3.9014 -1.13172,-0.62874 -1.13022,-1.887532 -0.75301,-2.642026 0.37728,-0.754494 1.63493,-1.255453 1.00619,-2.1357 -0.62875,-0.880239 -1.7592,-4.145835 -1.7592,-5.277579 0,-1.131738 -1.26028,-0.633012 -1.88901,-1.136008 -0.62876,-0.502996 -2.13737,-3.51858 -2.38887,-4.524565 -0.25149,-1.005992 -0.75301,-2.895392 -0.75301,-3.901384 0,-1.005992 -0.37985,-1.00618 -0.88285,-1.00618 z m -103.74045,71.678992 -1.00617,0.75301 -0.75301,3.27171 2.01236,0 1.50602,-2.1357 -1.7592,-1.88902 z m 10.30848,5.03091 -1.12949,0.753 -1.25937,-0.37651 -1.88251,9.80864 1.50602,0 1.63586,3.8949 9.55546,1.88902 5.53723,-0.25317 2.38886,-1.12952 c 0,0 -0.50224,-1.76253 -0.3765,-2.26553 0.12576,-0.50299 -2.8952,-4.52456 -2.8952,-4.52456 l -1.75921,1.25934 0,-2.51869 -2.89518,-2.01237 -4.90108,-1.12952 -3.52489,-3.39503 z" id="Bronx" inkscape:connector-curvature="0"/></g><g inkscape:groupmode="layer" id="layer3" inkscape:label="icons" transform="translate(-20.777794,-9.75)"/><script xmlns=""/></svg>
    Login or Signup to reply.
  2. 0

    You cannot change the fill from the path without modifiying the svg

    Why?

    Because the path you are trying to target has his fill defined in his style
    and according to the CSS Specificity

    What if I still want to change it ?

    You could either use !important (I recommend using it the least possible)

    or

    You will have to extract the style from the style attribute

    Example with smaller svg:

    svg {
  height: 100px;
}

svg:hover .heart {
  fill: red;
}
    <h3>This one with inline style fill (not specific enough)</h3>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    class="heart"
    style="fill:grey;"
    d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z" />
</svg>

<h3>This one with fill attribute 👍</h3>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
    class="heart"
    fill="grey"
    d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z" />
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search