Using CSS to transition the fill property of an SVG path on hover
In order to transition/fade, CSS needs a starting value and an ending value.
Because you set the color for the path using the SVG attribute fill="#FAFAFA", CSS doesn't process it and the transition doesn't fade.
Instead if you use CSS to set the color, the transition will behave as expected
So all I had to do to make the transition work is give the #europe a starting fill to transition from.
path { transition: fill .4s ease; }
/* set fill for before and for during hover */
#europe path { fill: red; }
#europe:hover path { fill: white; }
Here's a working JSFiddle.
Or, doing it inline can be more convenient (style=""):
<path style="fill: #FAFAFA;" d="..."/>
Just in order for CSS to do your fading, it needs to handle the start and end values in CSS/inline style (as opposed to using the SVG fill= attribute).
How to change svg fill on hover
Your problem is that you are styling the original exit SVG on hover. That particular one should work.
However all the other buttons that use <svg><use> will not work because when you hover over them, the mouse event doesn't get passed through to the original one (that use points to).
Instead, you should attach the hover rule to the <svg><use> elements instead.
You can apply a style to them, and it will inherited by the original used instance.
.exit {
width: 47.63px;
height: 47.63px;
border: none;
background: none;
padding: 0;
}
.exit:hover svg {
fill: green;
}<p>original</p>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<g id="exit">
<title>exit</title>
<circle class="exitCircle" cx="0" cy="0" r="144" fill="transparent"/>
<path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
</g>
</svg>
</button>
<p><use></p>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>SVG Color transition does not work on hover
You need to give #Rectangle a starting value in order for the transition to work. As it needs a value to transition to/from. For example:
#Rectangle{
fill: white;
transition: 1s;
}
#Rectangle{
fill: white; /*Add starting fill*/
transition: 1s; }
svg:hover #Rectangle{
fill: #DAF0FF;
}<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 113"><title>Telephone</title><g id="Page-1"><g id="Artboard-2"><g id="Group-13"><g id="Group-4"><g id="Group-9"><rect id="Rectangle" x="1" y="1" width="160" height="111" rx="8" ry="8" fill="none" stroke="#2b7db5" stroke-width="2"/></g></g><g id="icons8-phone_office" data-name="icons8-phone office"><rect id="Rectangle-path" x="55.24" y="36.31" width="55.86" height="49.66" rx="3" ry="3" fill="#c2cde7"/><path id="Shape" d="M59.38,72.52H107a4.14,4.14,0,0,1,4.14,4.14v6.21A3.1,3.1,0,0,1,108,86H58.34a3.1,3.1,0,0,1-3.1-3.1V76.66A4.14,4.14,0,0,1,59.38,72.52Z" fill="#acb7d0"/><path id="Shape-2" data-name="Shape" d="M68.69,36.31H108a3.1,3.1,0,0,1,3.1,3.1V54.93H65.59V39.41A3.1,3.1,0,0,1,68.69,36.31Z" fill="#bbdef9"/><polygon id="Shape-3" data-name="Shape" points="78.18 54.93 92.31 36.31 108.86 36.31 94.73 54.93 78.18 54.93" fill="#def0ff"/><polygon id="Shape-4" data-name="Shape" points="69.94 54.93 84.68 36.31 88.17 36.31 73.43 54.93 69.94 54.93" fill="#def0ff"/><polygon id="Shape-5" data-name="Shape" points="66.96 52.86 80.07 36.31 81.1 36.31 68 52.86 66.96 52.86" fill="#def0ff"/><path id="Shape-6" data-name="Shape" d="M66.62,32.17H53.17V28H49V76.66a3.1,3.1,0,0,0,3.1,3.1H66.62a3.1,3.1,0,0,0,3.1-3.1V35.28A3.1,3.1,0,0,0,66.62,32.17Z" fill="#c2cde7"/><rect id="Rectangle-path-2" data-name="Rectangle-path" x="49.03" y="72.52" width="20.69" height="7.24" rx="3" ry="3" fill="#acb7d0"/><path id="Shape-7" data-name="Shape" d="M53.17,32.17h14a2.59,2.59,0,0,1,2.59,2.59h0a2.59,2.59,0,0,1-2.59,2.59h-14Z" fill="#ced9ed"/><rect id="Rectangle-path-3" data-name="Rectangle-path" x="75.93" y="61.14" width="6.21" height="6.21" fill="#ed7899"/><rect id="Rectangle-path-4" data-name="Rectangle-path" x="86.28" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-5" data-name="Rectangle-path" x="96.62" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-6" data-name="Rectangle-path" x="75.93" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-7" data-name="Rectangle-path" x="86.28" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-8" data-name="Rectangle-path" x="96.62" y="71.48" width="6.21" height="6.21" fill="#72caaf"/><path id="Shape-8" data-name="Shape" d="M81.1,60.1H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,68.38H81.1a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,81.1,60.1Zm0,6.21H77V62.17H81.1Z" fill="#2b7db5"/><path id="Shape-9" data-name="Shape" d="M91.45,60.1H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,91.45,60.1Zm0,6.21H87.31V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-10" data-name="Shape" d="M91.45,70.45H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,91.45,70.45Zm0,6.21H87.31V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-11" data-name="Shape" d="M101.79,70.45H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,101.79,70.45Zm0,6.21H97.66V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-12" data-name="Shape" d="M101.79,60.1H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,101.79,60.1Zm0,6.21H97.66V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-13" data-name="Shape" d="M81.1,70.45H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,78.72H81.1a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,81.1,70.45Zm0,6.21H77V72.52H81.1Z" fill="#2b7db5"/><path id="Shape-14" data-name="Shape" d="M78,46.73h1v1H78a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1H79V43.55h1a1,1,0,0,0,0-2.07H78a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-15" data-name="Shape" d="M84.21,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07H84.21a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-16" data-name="Shape" d="M90.41,46.73h1v1h-1a1,1,0,0,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,1,0,0-2.07H90.41a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-17" data-name="Shape" d="M100.76,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07h-2.07a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-18" data-name="Shape" d="M109,35.28H70.66a5.17,5.17,0,0,0-5.07-4.14H54.21v-1a3.1,3.1,0,0,0-6.21,0V75.62a5.17,5.17,0,0,0,5.17,5.17h1v3.1a3.1,3.1,0,0,0,3.1,3.1H109a3.1,3.1,0,0,0,3.1-3.1V38.38A3.1,3.1,0,0,0,109,35.28ZM51.1,29.07a1,1,0,0,1,1,1v8.28a1,1,0,0,0,2.07,0V33.21H65.59a3.1,3.1,0,0,1,3.1,3.1V72.52H50.07V30.1A1,1,0,0,1,51.1,29.07Zm-1,46.55v-1H68.69v1a3.1,3.1,0,0,1-3.1,3.1H53.17A3.1,3.1,0,0,1,50.07,75.62Zm59,9.31H57.31a1,1,0,0,1-1-1v-3.1h9.31a5.17,5.17,0,0,0,5.17-5.17V37.34H109a1,1,0,0,1,1,1V53.9H82.14a1,1,0,1,0,0,2.07h27.93V83.9A1,1,0,0,1,109,84.93Z" fill="#2b7db5"/><path id="Shape-19" data-name="Shape" d="M95.59,46.66h2.07a1,1,0,0,0,0-2.07H95.59a1,1,0,1,0,0,2.07Z" fill="#2b7db5"/><path id="Shape-20" data-name="Shape" d="M54.21,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,54.21,57Z" fill="#2b7db5"/><path id="Shape-21" data-name="Shape" d="M59.38,57a1,1,0,0,0,1-1V53.9a1,1,0,0,0-2.07,0V56A1,1,0,0,0,59.38,57Z" fill="#2b7db5"/><path id="Shape-22" data-name="Shape" d="M64.55,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,64.55,57Z" fill="#2b7db5"/><path id="Shape-23" data-name="Shape" d="M79,54.93a1,1,0,0,0-1-1H73.86a1,1,0,0,0,0,2.07H78A1,1,0,0,0,79,54.93Z" fill="#2b7db5"/></g></g></g></g></svg>How to change svg path width on hover
A possible solution: you can use a line path with a marker-end. The marker is the tip of the arrow. For the animation I'm using SMIL animations changing the d attribute of the path from M1,4L25,4 to M1,4L50,4. The animate element has a begin attribute making the animation to begin when you mouse over the overlaying rectangle: begin="theRect.mouseover". Another animate element animates the path on mouse out: begin="theRect.mouseout"
svg {
border: 1px solid red;
transition: width 0.5s ease;
}<svg id="theSVG" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 8" stroke="#000" stroke-linecap="round">
<defs>
<marker id="m" overflow="visible" markerUnits="userSpaceOnUse">
<path d="M-3,-3L0,0 -3,3" />
</marker>
</defs>
<path d="M1,4L25,4" marker-end="url(#m)">
<animate attributeName="d" to="M1,4L50,4" dur="1s" begin="theRect.mouseover" repeatCount="1" fill="freeze" />
<animate attributeName="d" to="M1,4L25,4" dur="1s" begin="theRect.mouseout" repeatCount="1" fill="freeze" />
</path>
<rect width="100%" height="100%" stroke="none" pointer-events="all" id="theRect" />
</svg>Hover on part of SVG, change path fill
Seems to be related to the
.st4 {
fill: none;
}
Changing that to:
.st4 {
fill: transparent;
}
and then using the regular :hover class of:
.wedge:hover {
fill: rgba(21, 255, 0, 0.5);
}
does the trick. Like this:
/*
* === CSS for SVG compass ===
*/
/*
* — Structural and appearance —
*/
* {
z-index: 1;
}
/* Contains compass and limits its size */
.compassWrap {
max-width: 40%;
margin: 0 auto;
}
/* probably needs adjusted */
/* SVG styles, no need to change */
.st0 {
fill: none;
stroke: #505050;
stroke-width: 4.11;
stroke-linecap: round;
stroke-miterlimit: 10;
}
/* don't change */
.st1 {
fill: none;
stroke: #808080;
stroke-width: 2.57;
stroke-linecap: round;
stroke-miterlimit: 10;
}
/* don't change */
.st2 {
fill: #505050;
}
/* don't change */
.st3 {
opacity: 0.5;
}
/* don't change */
.st4 {
fill: transparent;
}
/* don't change */
/*
* — Pie color classes —
Add the class to the path with the ID of the direction you want
Available path ID's
#nnwPie - north by north west
#wnwPie - west by north west
#wswPie - west by south west
#sswPie - south by south west
#ssePie - south by south east
#esePie - east by south east
#enePie - east by north east
#nnePie - north by north east
*/
.green {
fill: rgba(21, 255, 0, 0.5);
}
/* best wind */
.dgreen {
fill: rgba(12, 140, 0, 0.5);
}
/* less good wind */
.red {
fill: rgba(255, 42, 0, 0.5);
}
/* worst wind */
.dred {
fill: rgba(140, 23, 0, 0.5);
}
/* less bad wind */
.wedge {
z-index: 10 !important;
}
.wedge:hover {
fill: rgba(21, 255, 0, 0.5);
}
/* best wind */
/*
* === Arrow ===
*/
/* adjust the center point and make arrow wiggle at all times */
#arrow {
transform-origin: 50% 59.7%;
animation-name: wiggle;
animation-duration: 1s;
animation-fill-mode: forward;
animation-iteration-count: infinite;
}
/*
* === ADD CLASS TO #arrow to move to location and wiggle ===
*/
.north#arrow {
transform-origin: 50% 59.7%;
animation-name: spinNorth, wiggleNorth;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.northEast#arrow {
transform-origin: 50% 59.7%;
animation-name: spinNorthEast, wiggleNorthEast;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.east#arrow {
transform-origin: 50% 59.7%;
animation-name: spinEast, wiggleEast;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.southEast#arrow {
transform-origin: 50% 59.7%;
animation-name: spinSouthEast, wiggleSouthEast;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.south#arrow {
transform-origin: 50% 59.7%;
animation-name: spinSouth, wiggleSouth;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.southWest#arrow {
transform-origin: 50% 59.7%;
animation-name: spinSouthWest, wiggleSouthWest;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.west#arrow {
transform-origin: 50% 59.7%;
animation-name: spinWest, wiggleWest;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.northWest#arrow {
transform-origin: 50% 59.7%;
animation-name: spinNorthWest, wiggleNorthWest;
animation-delay: 0s, 1s;
animation-duration: 1s, 1s;
animation-iteration-count: 1, infinite;
}
.wedge:hover {
fill: rgba(21, 255, 0, 0.5);
}
/*
* === Animations to make #arrow spin ===
*/
/* Spin north Animation */
@keyframes spinNorth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
/* Spin north east Animation */
@keyframes spinNorthEast {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
/* Spin east Animation */
@keyframes spinEast {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(135deg);
}
}
/* Spin south east Animation */
@keyframes spinSouthEast {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
/* Spin south Animation */
@keyframes spinSouth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(225deg);
}
}
/* Spin south west Animation */
@keyframes spinSouthWest {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
/* Spin west Animation */
@keyframes spinWest {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(315deg);
}
}
/* Spin north west Animation */
@keyframes spinNorthWest {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
/* 360 because this is the starting point of #arrow */
}
}
/*
* === WIGGLES for each direction ===
*/
/* Wiggle north Animation */
@keyframes wiggleNorth {
0% {
transform: rotate(46deg);
}
50% {
transform: rotate(44deg);
}
100% {
transform: rotate(46deg);
}
}
/* Wiggle north east Animation */
@keyframes wiggleNorthEast {
0% {
transform: rotate(91deg);
}
50% {
transform: rotate(89deg);
}
100% {
transform: rotate(91deg);
}
}
/* Wiggle east Animation */
@keyframes wiggleEast {
0% {
transform: rotate(136deg);
}
50% {
transform: rotate(134deg);
}
100% {
transform: rotate(136deg);
}
}
/* Wiggle south east Animation */
@keyframes wiggleSouthEast {
0% {
transform: rotate(181deg);
}
50% {
transform: rotate(179deg);
}
100% {
transform: rotate(181deg);
}
}
/* Wiggle south Animation */
@keyframes wiggleSouth {
0% {
transform: rotate(226deg);
}
50% {
transform: rotate(224deg);
}
100% {
transform: rotate(226deg);
}
}
/* Wiggle south west Animation */
@keyframes wiggleSouthWest {
0% {
transform: rotate(271deg);
}
50% {
transform: rotate(269deg);
}
100% {
transform: rotate(271deg);
}
}
/* Wiggle west Animation */
@keyframes wiggleWest {
0% {
transform: rotate(316deg);
}
50% {
transform: rotate(314deg);
}
100% {
transform: rotate(316deg);
}
}
/* Wiggle north west Animation */
@keyframes wiggleNorthWest {
0% {
transform: rotate(361deg);
}
50% {
transform: rotate(359deg);
}
100% {
transform: rotate(361deg);
}
}
/*
* === wiggle when no direction ===
*/
@keyframes wiggle {
0% {
transform: rotate(1deg);
}
50% {
transform: rotate(-1deg);
}
100% {
transform: rotate(1deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compassWrap">
<svg version="1.1" id="Layer_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.3 144" style="enable-background:new 0 0 116.3 144;" xml:space="preserve">
<title>compass</title>
<line id="N" class="st0" x1="58.2" y1="31.3" x2="58.2" y2="49.6"/>
<line id="NW" class="st1" x1="18.5" y1="46.1" x2="31.4" y2="59"/>
<line id="W" class="st0" x1="3.6" y1="85.7" x2="21.9" y2="85.7"/>
<line id="SW" class="st1" x1="18.3" y1="125.5" x2="31.3" y2="112.5"/>
<line id="S" class="st0" x1="58" y1="140.3" x2="58" y2="122"/>
<line id="SE" class="st1" x1="97.7" y1="125.6" x2="84.8" y2="112.6"/>
<line id="E" class="st0" x1="113.4" y1="85.9" x2="95.1" y2="85.9"/>
<line id="NE" class="st1" x1="97.8" y1="46.2" x2="84.9" y2="59.1"/>
<path id="compass" class="st2" d="M69.6,28.8c6.7-6.3,7-16.9,0.7-23.6s-16.9-7-23.6-0.7s-7,16.9-0.7,23.6c0.2,0.2,0.4,0.5,0.7,0.7
c-31.5,6.3-51.9,37-45.6,68.5s37,51.9,68.5,45.6c31.5-6.3,51.9-37,45.6-68.5C110.6,51.4,92.6,33.4,69.6,28.8z M58.2,6.5
c5.6,0,10.2,4.6,10.2,10.2H48C48,11.1,52.6,6.5,58.2,6.5z M58.2,138.3c-29,0-52.5-23.5-52.5-52.5s23.5-52.5,52.5-52.5
c29,0,52.5,23.5,52.5,52.5c0,0,0,0,0,0C110.6,114.8,87.1,138.3,58.2,138.3z"/>
<path id="inner_compass" class="st2" d="M58.2,130.8c-24.9,0-45.2-20.2-45.2-45.2s20.2-45.2,45.2-45.2c24.9,0,45.2,20.2,45.2,45.1
c0,0,0,0,0,0C103.3,110.6,83.1,130.8,58.2,130.8z M58.2,43.8c-23.1,0-41.9,18.8-41.9,41.9s18.8,41.9,41.9,41.9s41.9-18.8,41.9-41.9
C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/>
<polygon id="arrow" class="st2" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3
73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3
34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4
76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>
<path id="nnwPie" class="st4 wedge" d="M57.9,27.7v58.2l-41-41C27.8,33.9,42.5,27.7,57.9,27.7z"/>
<path id="wnwPie" class="st4 wedge" d="M57.9,85.8H0.2v-0.2c0-15.3,6-30,16.8-40.8L57.9,85.8z"/>
<path id="wswPie" class="st4 wedge" d="M57.9,85.8l-40.8,40.8c-10.8-10.8-16.9-25.5-17-40.8H57.9z"/>
<path id="sswPie" class="st4 wedge" d="M57.9,85.8v57.8c-15.3,0-30-6.2-40.8-17L57.9,85.8z"/>
<path id="ssePie" class="st4 wedge" d="M99,126.9c-10.8,10.8-25.5,16.8-40.8,16.8H58V85.8L99,126.9z"/>
<path id="esePie" class="st4 wedge" d="M116.2,85.8c0,15.4-6.2,30.2-17.2,41l-41-41H116.2z"/>
<path id="enePie" class="st4 wedge" d="M116.2,85.7v0.2H57.9l41.2-41.2C110.1,55.5,116.2,70.3,116.2,85.7z"/>
<path id="nnePie" class="st4 wedge" d="M99.1,44.6L57.9,85.8V27.7h0.2C73.5,27.6,88.3,33.7,99.1,44.6z"/>
</svg>
</div>Fill SVG path with colour but on hover fade-in pattern
You can't transition fill like that because the two fills are not something that can be interpolated smoothly between.
What you need to do is have two versions of the ellipse, one on top of the other. Then either fade in or out the top one.
.visible-on-hover {
transition: opacity 400ms;
opacity: 0;
}
.visible-on-hover:hover {
opacity: 1;
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" height="480" width="640" viewBox="0 0 640 480">
<defs>
<pattern x="0" y="0" id="img1" height="1" width="1"
viewBox="0 0 640 480" preserveAspectRatio="xMidYMid slice">
<g fill-rule="evenodd" stroke-width="1pt">
<path d="M0 0h213.335v479.997H0z" />
<path fill="#ffd90c" d="M213.335 0H426.67v479.997H213.335z" />
<path fill="#f31830" d="M426.67 0h213.335v479.997H426.67z" />
</g>
</pattern>
</defs>
<rect fill="none" stroke="blue" x="1" y="1" width="640" height="480"/>
<ellipse stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" fill="url(#img1)"/>
<ellipse stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" fill="red" class="visible-on-hover"/>
</svg>Related Topics
Line-Height as a Percentage Not Working
How to Use Bootstrap Modals Without Loading the Entire Library
Why Is Gmail Blocking CSS in Emails
What's the Deal with Vertical-Align: Baseline
Twitter Bootstrap: Center Text on Progress Bar
Css: Borders Between Table Columns Only
How to Avoid iOS Automatic Font Size Adjustment
Is It Safe to Use the CSS Rule "Text-Rendering: Optimizelegibility;" on All Text
Wordpress Loop Posts in Bootstrap 3 Grid Layout
How to Properly Introduce a Light/Dark Mode in Bootstrap
Change Font-Weight of Fontawesome Icons
A Simple Example of Django and CSS
Display Image on Text Link Hover CSS Only
Css: Transition Opacity on Mouse-Out