Mouseover on SVG to change color [duplicate] - html

This question already has answers here:
img src SVG changing the styles with CSS
(26 answers)
Closed 3 years ago.
I added a SVG into my HTML. What I want to do is, when the mouse is hovering the SVG, change it to a yellowish color with transition of 1s.
The CSS in the HTML is:
.svg {
width: 17px;
height: 99px;
}
The content in HTML:
<body>
<img src="raptor.svg" class="svg" />
</body>
The raptor.svg content is as follow:
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
<style>
#content path {
fill: #F00;
transition: 1s;
}
#content:hover path {
fill: #E2C650;
}
</style>
<g id="Layer_2" data-name="Layer 2">
<g id="content">
<path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
<path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
<path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
<path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
<path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
<path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
</g>
</g>
</svg>
Alternatively, I tried to use CSS to change the color during mouse over:
.svg:hover {
color: #E2C650;
}
It's not working as well, as color CSS property cannot change the SVG fill color.
What did I miss? Do I have to use inline SVG instead?


Rather using svg in img tag you can use place svg in DOM. This should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
svg {
width: 17px;
height: 99px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
<style>
#content path {
fill: #F00;
transition: 1s;
}
#content:hover path {
fill: #E2C650;
}
</style>
<g id="Layer_2" data-name="Layer 2">
<g id="content">
<path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
<path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
<path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
<path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
<path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
<path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
</g>
</g>
</svg>
</body>
</html>


I can see this working quite happily if you hover over any part of the SVG path.
If you want to also cause the transition when hovering over any part of the SVG itself, and not just the path then add the following CSS:
svg:hover #content path {
fill: #E2C650;
}
Here's a working snippet:
svg {
width: 17px;
height: 99px;
}
svg:hover #content path {
fill: #E2C650;
}
#content path {
fill: #F00;
transition: 1s;
}
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
<g id="Layer_2" data-name="Layer 2">
<g id="content">
<path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
<path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
<path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
<path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
<path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
<path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
</g>
</g>
</svg>

Related

Space between the border of my rotated svg icon and the svg canvas

I'm creating a rudimental web icon system (a kind of sprite) with svg. However in my code around one icon (between the smash magazine icon and the red border) there is some room. I would know how it is possible to remove it. The icon is rotated and with the viewBox I'm not able to do the job. May be I have to make some transformation. How could I do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svg Icon System</title>
<style>
.icon {
/* width: 3em;
height: 3em; */
fill: currentColor;
stroke: black;
stroke-width: 2px;
background-color: yellow;
}
</style>
</head>
<body>
<svg width="0" height="0">
<defs>
<g id="icon-linkedin">
<path
d="M80.667,14H19.315C16.381,14,14,16.325,14,19.188v61.617C14,83.672,16.381,86,19.315,86h61.352
C83.603,86,86,83.672,86,80.805V19.188C86,16.325,83.603,14,80.667,14z M35.354,75.354H24.67V40.995h10.684V75.354z M30.012,36.297
c-3.423,0-6.19-2.774-6.19-6.194c0-3.415,2.767-6.189,6.19-6.189c3.415,0,6.189,2.774,6.189,6.189
C36.201,33.523,33.427,36.297,30.012,36.297z M75.35,75.354H64.683V58.646c0-3.986-0.078-9.111-5.551-9.111
c-5.558,0-6.405,4.341-6.405,8.822v16.998H42.052V40.995h10.245v4.692h0.146c1.426-2.7,4.91-5.549,10.106-5.549
c10.806,0,12.802,7.114,12.802,16.369V75.354z"
/>
</g>
<g id="icon-smash-mag">
<path
fill="#231F20"
d="M45.718,55.325c-3.727-1.408-7.229-3.226-10.202-5.401c-0.077-0.056-0.157-0.111-0.233-0.168
c-0.433-0.322-0.851-0.654-1.259-0.991c-0.107-0.088-0.211-0.178-0.316-0.267c-0.353-0.301-0.697-0.606-1.03-0.919
c-0.062-0.058-0.127-0.115-0.188-0.173c-0.373-0.357-0.73-0.724-1.074-1.096c-0.091-0.098-0.179-0.197-0.268-0.296
c-0.305-0.34-0.598-0.685-0.877-1.037c-0.041-0.052-0.085-0.102-0.125-0.154c-0.306-0.393-0.591-0.796-0.862-1.204
c-0.07-0.104-0.137-0.21-0.204-0.315c-0.246-0.385-0.479-0.774-0.693-1.171c-0.021-0.039-0.045-0.077-0.066-0.117
c-0.227-0.429-0.428-0.867-0.615-1.309c-0.047-0.11-0.091-0.221-0.135-0.333c-0.172-0.434-0.331-0.872-0.463-1.318
c-0.006-0.02-0.014-0.04-0.02-0.06c-0.135-0.463-0.241-0.934-0.331-1.41c-0.022-0.117-0.043-0.234-0.062-0.352
c-0.08-0.482-0.144-0.968-0.176-1.464c-0.042-0.665-0.055-1.318-0.047-1.963c0.002-0.199,0.018-0.392,0.025-0.589
c0.016-0.447,0.039-0.892,0.081-1.329c0.021-0.219,0.051-0.435,0.078-0.652c0.052-0.412,0.113-0.821,0.189-1.225
c0.039-0.211,0.083-0.42,0.129-0.629c0.091-0.413,0.198-0.82,0.315-1.224c0.053-0.183,0.104-0.366,0.163-0.547
c0.148-0.454,0.316-0.9,0.499-1.341c0.049-0.12,0.092-0.242,0.144-0.361c0.77-1.752,1.821-3.401,3.185-4.943L16.21,24.575
c-3.027,0.724-4.895,3.765-4.171,6.793l12.535,52.421c0.725,3.027,3.766,4.896,6.793,4.171l6.451-1.543
c-2.504-0.829-6.833-2.409-10.982-4.623l6.015-13.644c0,0,7.079,6.304,17.242,6.304C60.258,74.454,64.775,62.524,45.718,55.325z"
/>
<path
fill="#231F20"
d="M87.961,68.632L75.425,16.211c-0.723-3.028-3.765-4.895-6.793-4.171l-10.797,2.581
c0.86,0.136,1.984,0.346,3.307,0.667c0.313,0.076,0.641,0.16,0.975,0.249c0.117,0.031,0.237,0.064,0.357,0.097
c0.241,0.066,0.488,0.136,0.738,0.209c0.131,0.038,0.261,0.075,0.394,0.115c0.353,0.106,0.714,0.218,1.083,0.339
c0.116,0.038,0.237,0.081,0.355,0.12c0.276,0.093,0.556,0.189,0.84,0.29c0.159,0.057,0.319,0.115,0.481,0.174
c0.285,0.105,0.575,0.215,0.867,0.329c0.133,0.052,0.263,0.1,0.397,0.154c0.406,0.162,0.818,0.335,1.235,0.515
c0.141,0.061,0.285,0.127,0.428,0.19c0.314,0.14,0.63,0.284,0.949,0.434c0.147,0.069,0.294,0.138,0.441,0.21
c0.452,0.219,0.906,0.444,1.365,0.685l-4.702,13.03c0,0-3.913-4.371-14.405-4.903c-9.974-0.504-15.522,10.285,3.931,16.647
c0.573,0.188,1.127,0.384,1.67,0.585c0.15,0.055,0.298,0.112,0.446,0.169c0.42,0.16,0.832,0.324,1.234,0.492
c0.123,0.051,0.248,0.101,0.369,0.153c0.508,0.218,1.004,0.441,1.484,0.671c0.062,0.029,0.12,0.06,0.181,0.09
c0.418,0.203,0.824,0.411,1.221,0.622c0.119,0.063,0.236,0.127,0.353,0.191c0.379,0.208,0.75,0.42,1.109,0.636
c0.064,0.038,0.131,0.076,0.194,0.115c0.424,0.259,0.833,0.523,1.229,0.792c0.069,0.047,0.134,0.094,0.202,0.141
c0.327,0.226,0.645,0.456,0.953,0.689c0.084,0.064,0.169,0.127,0.252,0.192c0.357,0.276,0.706,0.556,1.038,0.841c0,0,0,0,0,0
c5.631,4.835,7.638,10.851,7.476,16.562c-0.128,4.513-1.707,8.184-3.538,10.953l11.048-2.641
C86.817,74.702,88.684,71.659,87.961,68.632z"
/>
</g>
</defs>
</svg>
<!-- viewBox="0 0 100 100" -->
<!-- prettier-ignore -->
<svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
<title>Icona di Linkedin</title>
<use xlink:href="#icon-linkedin"></use>
</svg>
<!-- prettier-ignore -->
<svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
<title>Icona di Smah Magazine</title>
<use xlink:href="#icon-smash-mag"></use>
</svg>
<!-- <button style="color:green">
<svg class="icon" width="50" height="50" viewBox="0 0 100 100" style="border: 1px solid red">
<title>Icona di Linkedin</title>
<use xlink:href="#icon-linkedin"></use>
</svg>
</button> -->
</body>
</html>

Your SVG's have default display:inline and there's a whitespace between them, which is rendered by browser like it was a whitespace between two words.
Quick and dirty solution is to remove the whitespaces - all of them, including line breaks.
But the better one is to use flexbox to turn your SVG's to flex elements.

SVG *pattern* stroke color change on hover with pure CSS?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
body, html {
height: 100%;
background-color:#eee;
margin:0;
padding:0;
overflow: hidden;
}
path {
fill: #eee;
stroke: #000;
stroke-width:1;
pointer-events: visible;
}
</style>
</head>
<body>
<svg width="100%" height="100%" >
<pattern id="pattern-hex" x="0" y="0" width="112" height="190" patternUnits="userSpaceOnUse" viewBox="56 -254 112 190">
<g id="hexagon">
<path class="bla" d="M168-127.1c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-0.3 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5C167-127,167.5-127.1,168-127.1 L168-127.1z"/>
<path class="bla" d="M112-222.5c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2l-53.4,30.5 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C111-222.4,111.5-222.5,112-222.5L112-222.5z"/>
<path class="bla" d="M168-317.8c0.5,0,1,0.1,1.3,0.3l53.4,30.5c0.7,0.4,1.3,1.4,1.3,2.2v61c0,0.8-0.6,1.8-1.3,2.2L169.3-191 c-0.7,0.4-1.9,0.4-2.6,0l-53.4-30.5c-0.7-0.4-1.3-1.4-1.3-2.2v-61c0-0.8,0.6-1.8,1.3-2.2l53.4-30.5 C167-317.7,167.5-317.8,168-317.8L168-317.8z"/>
</g>
</pattern>
<!-- The canvas for our pattern -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-hex)" />
</svg>
</body>
</html>
How would I go about changing the SVG pattern's stroke color on hover via CSS? I read elsewhere that SVG patterns might not accept pure CSS hover changes, and I'd have to rely on JS events attached to the individual paths?

Changing color/style of SVG fill with CSS Selectors

I have this SVG script inside some html:
<style type="text/css">
.Circle {
fill: #ff6666;
}
#bin {
fill: #fff;
}
.Line {
fill: #cccccc;
}
</style>
<g>
<circle class="Circle" id="OuterCircle" cx="15.8" cy="15.2" r="15.2" />
<path class="Path" id="bin" d="M9.6,7.6C9.2,7.8,9,8.3,9.1,8.6c0.1,0.3,0.4,0.5,0.5,0.5h12.5c0.4-0.2,0.6-0.6,0.5-1c-0.1-0.3-0.4-0.5-0.5-0.5h-9H9.6z" />
<path class="Path" id="bin" d="M13.9,6.7c-0.5,0.3-0.8,0.7-1,1c0.3,0,0.6,0,1,0c0-0.2,0-0.3,0-0.5h3.8c0,0.2,0,0.3,0,0.5c0.3,0,0.7,0,1,0c-0.2-0.3-0.5-0.7-1-1C16.6,6,15.1,5.9,13.9,6.7z" />
<path class="Path" id="bin" d="M9.6,9.6h12.5l-1,14.9c0,0-0.1,0.4-0.5,0.5c-0.2,0.1-0.4,0-0.5,0c-2.9,0-5.8,0-8.7,0c-0.1,0-0.3,0.1-0.5,0c-0.3-0.1-0.5-0.4-0.5-0.5C10.2,19.5,9.9,14.5,9.6,9.6z" />
<polygon class="Line" points="14.5,12 17.1,12 16.7,22.8 15,22.8 " />
<path class="Line" d="M18,12v10.8h1.7c0.3-3.8,0.6-7.5,0.9-11.3C19.8,11.7,18.9,11.8,18,12z" />
<path class="Line" d="M11,11.5c0.9,0.2,1.8,0.3,2.6,0.5v10.8h-1.7C11.9,22.8,11.9,22.8,11,11.5z" />
</g>
I am trying to style it so that when you hover over the class "Path", it changes the style of the class "OuterCircle". The CSS I've tried so far doesn't seem to working.
The current CSS for hover I have so far is:
.Circle:hover {
fill: #97D0FF;
}
g.Path:hover > #OuterCircle {
fill: #97D0FF;
}
I've tried using different sibling combinators but nothing seems to work, and placing the circle attribute underneath the path attribute messes up the svg image. I'm not really sure how this works with svg.

There is no a "previous sibling" selector in CSS, so you can't style #OuterCircle on .Path:hover.
But, you can add a class to the parent group and style #OuterCircle when the group is hovered.
.Circle {
fill: #ff6666;
}
#bin {
fill: #fff;
}
.Line {
fill: #cccccc;
}
g.icon:hover #OuterCircle {
fill: #97D0FF;
}
<svg>
<g class="icon">
<circle class="Circle" id="OuterCircle" cx="15.8" cy="15.2" r="15.2" />
<path class="Path" id="bin" d="M9.6,7.6C9.2,7.8,9,8.3,9.1,8.6c0.1,0.3,0.4,0.5,0.5,0.5h12.5c0.4-0.2,0.6-0.6,0.5-1c-0.1-0.3-0.4-0.5-0.5-0.5h-9H9.6z" />
<path class="Path" id="bin" d="M13.9,6.7c-0.5,0.3-0.8,0.7-1,1c0.3,0,0.6,0,1,0c0-0.2,0-0.3,0-0.5h3.8c0,0.2,0,0.3,0,0.5c0.3,0,0.7,0,1,0c-0.2-0.3-0.5-0.7-1-1C16.6,6,15.1,5.9,13.9,6.7z" />
<path class="Path" id="bin" d="M9.6,9.6h12.5l-1,14.9c0,0-0.1,0.4-0.5,0.5c-0.2,0.1-0.4,0-0.5,0c-2.9,0-5.8,0-8.7,0c-0.1,0-0.3,0.1-0.5,0c-0.3-0.1-0.5-0.4-0.5-0.5C10.2,19.5,9.9,14.5,9.6,9.6z" />
<polygon class="Line" points="14.5,12 17.1,12 16.7,22.8 15,22.8 " />
<path class="Line" d="M18,12v10.8h1.7c0.3-3.8,0.6-7.5,0.9-11.3C19.8,11.7,18.9,11.8,18,12z" />
<path class="Line" d="M11,11.5c0.9,0.2,1.8,0.3,2.6,0.5v10.8h-1.7C11.9,22.8,11.9,22.8,11,11.5z" />
</g>
</svg>

How to style one particular SVG path in CSS?

Is it possible to style differently a same SVG symbol with 2 distinct CSS classes. Like in this jsfiddle
.shape-55 {
width: 55px;
height: 55px;
}
/* Want to color only the first path in red */
.shape-style-1 path:nth-of-type(1) {
fill: red;
}
/* Want to color only the first path in blue */
.shape-style-2 path:nth-of-type(1) {
fill: blue;
}
<!-- SVG Spritesheets-->
<svg class="shape" style="display:none;">
<symbol viewBox="0 0 64 64" id="shape-1">
<title>sw_av_a_tkn-cscd</title>
<g>
<g>
<path d="M22.541,0C10.511,0,0.723,4.298,0.723,9.581v4.455c0,5.283,9.788,9.581,21.817,9.581c12.032,0,21.819-4.298,21.819-9.581
V9.581C44.359,4.298,34.572,0,22.541,0z M40.568,14.969v3.733c-2.49,1.708-6.309,3.034-10.837,3.726v-3.804
C34.17,17.941,37.963,16.646,40.568,14.969z M7.197,3.443c1.56,0.624,2.804,1.122,3.78,1.513c1.959-0.907,4.483-1.582,7.34-1.925
c-0.348-0.535-0.787-1.213-1.332-2.061c1.771-0.204,3.635-0.315,5.556-0.315c1.926,0,3.792,0.112,5.569,0.318
c-0.548,0.847-0.984,1.522-1.329,2.058c2.851,0.343,5.381,1.018,7.34,1.925c0.973-0.391,2.215-0.888,3.771-1.508
c3.268,1.453,5.387,3.368,5.748,5.483c-2.227,0.07-3.982,0.123-5.357,0.167c0.025,0.158,0.043,0.318,0.043,0.482
c0,1.35-0.918,2.608-2.498,3.665c1.137,0.313,2.582,0.713,4.414,1.219c-2.543,1.629-6.314,2.89-10.756,3.542
c-0.682-0.83-1.229-1.495-1.661-2.02c-1.649,0.252-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c-1.235,0-0.006,0.66-0.006,0
c0,0,0,0-0.002,0c-1.849,0-3.621-0.136-5.271-0.388c-0.432,0.524-0.979,1.19-1.664,2.021c-4.448-0.653-8.223-1.913-10.765-3.544
c1.828-0.506,3.273-0.905,4.41-1.219c-1.58-1.057-2.495-2.315-2.495-3.665c0-0.164,0.018-0.324,0.041-0.482
C5.424,9.055,3.672,9.002,1.44,8.932C1.801,6.814,3.923,4.899,7.197,3.443z M4.512,14.969c2.611,1.679,6.406,2.975,10.854,3.656
v3.806c-4.541-0.691-8.359-2.019-10.854-3.729V14.969z"></path>
<path d="M22.541,13.296c4.596,0,8.199-1.633,8.199-3.715c0-2.084-3.604-3.718-8.199-3.718c-4.597,0-8.197,1.634-8.197,3.718
C14.343,11.663,17.944,13.296,22.541,13.296z M22.541,6.521c4.089,0,7.54,1.4,7.54,3.06c0,1.658-3.451,3.059-7.54,3.059
c-4.087,0-7.541-1.4-7.541-3.059C15,7.922,18.454,6.521,22.541,6.521z"></path>
</g>
<path d="M25.038,34.037c-0.81,0.059-1.638,0.094-2.483,0.094c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.141-5.271-0.391c-0.432,0.524-0.979,1.191-1.664,2.022c-4.448-0.653-8.223-1.912-10.765-3.546
c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.173-5.81-2.753-7.378-4.609c-0.028,0.211-0.052,0.424-0.052,0.64v4.456
c0,5.266,9.721,9.548,21.694,9.58C22.864,38.741,23.758,36.27,25.038,34.037z M15.367,40.185c-4.541-0.69-8.359-2.021-10.854-3.729
v-3.733c2.611,1.679,6.406,2.976,10.854,3.658V40.185z"></path>
<path d="M22.083,45.084c0-0.699,0.041-1.388,0.104-2.069c-1.72-0.018-3.375-0.143-4.917-0.376c-0.432,0.524-0.979,1.189-1.664,2.02
c-4.448-0.652-8.223-1.912-10.765-3.544c1.288-0.355,2.376-0.659,3.312-0.915c-3.259-1.172-5.81-2.749-7.378-4.605
c-0.028,0.21-0.052,0.426-0.052,0.639v4.456c0,5.281,9.788,9.578,21.817,9.578c0.061,0,0.116-0.003,0.175-0.003
C22.316,48.6,22.083,46.868,22.083,45.084z M15.367,49.08c-4.541-0.69-8.359-2.017-10.854-3.728v-3.731
c2.611,1.679,6.406,2.974,10.854,3.655V49.08z"></path>
<path d="M23.161,51.904c-0.204,0.003-0.402,0.023-0.606,0.023c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.14-5.271-0.391c-0.432,0.524-0.979,1.189-1.664,2.023c-4.448-0.653-8.223-1.915-10.765-3.548
c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.172-5.81-2.752-7.378-4.611c-0.028,0.213-0.052,0.426-0.052,0.642v4.456
c0,5.282,9.788,9.581,21.817,9.581c1.519,0,2.999-0.069,4.427-0.198C25.3,56.883,23.998,54.499,23.161,51.904z M15.367,57.979
c-4.541-0.691-8.359-2.018-10.854-3.726v-3.736c2.611,1.679,6.406,2.976,10.854,3.657V57.979z"></path>
<g>
<path d="M44.359,22.805v-4.37c0-0.213-0.02-0.428-0.055-0.639c-1.568,1.858-4.119,3.437-7.375,4.608
c0.863,0.237,1.877,0.518,3.043,0.84C41.393,22.958,42.859,22.805,44.359,22.805z"></path>
<path d="M26.123,32.331c1.037-1.479,2.25-2.82,3.608-4.007v-0.846c0.454-0.069,0.897-0.151,1.341-0.232
c0.432-0.322,0.868-0.633,1.323-0.923c-0.933,0.207-1.9,0.391-2.909,0.539c-0.682-0.831-1.229-1.495-1.661-2.02
c-1.649,0.249-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.139-5.271-0.388c-0.432,0.524-0.979,1.188-1.664,2.021c-4.448-0.653-8.223-1.914-10.765-3.546
c1.288-0.355,2.376-0.657,3.312-0.914c-3.259-1.172-5.81-2.75-7.378-4.608c-0.028,0.211-0.052,0.426-0.052,0.639v4.456
c0,5.283,9.788,9.58,21.817,9.58C23.761,32.471,24.954,32.417,26.123,32.331z M15.367,31.285
c-4.541-0.693-8.359-2.018-10.854-3.728v-3.733c2.611,1.679,6.406,2.974,10.854,3.656V31.285z"></path>
</g>
<path d="M44.359,26.166c-10.445,0-18.914,8.469-18.914,18.918C25.446,55.53,33.914,64,44.359,64
c10.451,0,18.918-8.47,18.918-18.916C63.277,34.635,54.811,26.166,44.359,26.166z M53.428,46.976c0,0.49-0.402,0.889-0.891,0.889
h-5.393v5.393c0,0.49-0.4,0.893-0.891,0.893h-3.789c-0.486,0-0.889-0.402-0.889-0.893v-5.393h-5.393
c-0.488,0-0.889-0.398-0.889-0.889v-3.786c0-0.49,0.4-0.892,0.889-0.892h5.393v-5.393c0-0.489,0.402-0.886,0.889-0.886h3.789
c0.49,0,0.891,0.396,0.891,0.886v5.393h5.393c0.488,0,0.891,0.401,0.891,0.892V46.976z"></path>
</g>
</symbol>
</svg>
<div>
<svg class="shape-55 shape-style-1">
<use xlink:href="#shape-1"></use>
</svg>
</div>
<div>
<svg class="shape-55 shape-style-2">
<use xlink:href="#shape-1"></use>
</svg>
</div>
I need to color the first "path" in red when using CSS class shape-style-1 and in blue when using shape-style-2.
Thank you.

You can style the parent div's colors, and use fill: currentColor to use that color for the appropriate SVG element.
So this CSS:
div > svg {
width: 55px;
height: 55px;
}
svg g g > path:nth-of-type(1) {
fill: currentColor;
}
div:nth-of-type(even) {
color: red;
}
div:nth-of-type(odd) {
color: blue;
}
… used with this HTML:
<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>
… will look like this:
Fiddle

You can achieve what you want, but without CSS.
See this fiddle: http://jsfiddle.net/41e0f7z5/2/
The trick is that you can set a fill attribute to the <use> element. Then, your symbol is composed of a path and a group owning all the other pathes. This group has a fillattribute set to black. But, because the firt path has no fillattribute, it will inherit from the <use> one.
<svg class="shape" style="display:none;">
<symbol viewBox="0 0 64 64" id="shape-1">
<path d="..."/>
<g fill="black">
<path d="..." />
<path d="..." />
<path d="..." />
...
</g>
</symbol>
</svg>
<div>
<svg class="shape-55">
<use xlink:href="#shape-1" fill="red"></use>
</svg>
</div>
<div>
<svg class="shape-55">
<use xlink:href="#shape-1" fill="blue"></use>
</svg>
</div>

Something like this?
.shape-55 {
width: 55px;
height: 55px;
}
<body>
<!-- SVG Spritesheets-->
<svg class="shape" style="display:none;">
<symbol viewBox="0 0 64 64" id="shape-1">
<title>sw_av_a_tkn-cscd</title>
<path d="M22.541,0C10.511,0,0.723,4.298,0.723,9.581v4.455c0,5.283,9.788,9.581,21.817,9.581c12.032,0,21.819-4.298,21.819-9.581
V9.581C44.359,4.298,34.572,0,22.541,0z M40.568,14.969v3.733c-2.49,1.708-6.309,3.034-10.837,3.726v-3.804
C34.17,17.941,37.963,16.646,40.568,14.969z M7.197,3.443c1.56,0.624,2.804,1.122,3.78,1.513c1.959-0.907,4.483-1.582,7.34-1.925
c-0.348-0.535-0.787-1.213-1.332-2.061c1.771-0.204,3.635-0.315,5.556-0.315c1.926,0,3.792,0.112,5.569,0.318
c-0.548,0.847-0.984,1.522-1.329,2.058c2.851,0.343,5.381,1.018,7.34,1.925c0.973-0.391,2.215-0.888,3.771-1.508
c3.268,1.453,5.387,3.368,5.748,5.483c-2.227,0.07-3.982,0.123-5.357,0.167c0.025,0.158,0.043,0.318,0.043,0.482
c0,1.35-0.918,2.608-2.498,3.665c1.137,0.313,2.582,0.713,4.414,1.219c-2.543,1.629-6.314,2.89-10.756,3.542
c-0.682-0.83-1.229-1.495-1.661-2.02c-1.649,0.252-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c-1.235,0-0.006,0.66-0.006,0
c0,0,0,0-0.002,0c-1.849,0-3.621-0.136-5.271-0.388c-0.432,0.524-0.979,1.19-1.664,2.021c-4.448-0.653-8.223-1.913-10.765-3.544
c1.828-0.506,3.273-0.905,4.41-1.219c-1.58-1.057-2.495-2.315-2.495-3.665c0-0.164,0.018-0.324,0.041-0.482
C5.424,9.055,3.672,9.002,1.44,8.932C1.801,6.814,3.923,4.899,7.197,3.443z M4.512,14.969c2.611,1.679,6.406,2.975,10.854,3.656
v3.806c-4.541-0.691-8.359-2.019-10.854-3.729V14.969z"></path>
<g fill="black">
<path d="M22.541,13.296c4.596,0,8.199-1.633,8.199-3.715c0-2.084-3.604-3.718-8.199-3.718c-4.597,0-8.197,1.634-8.197,3.718
C14.343,11.663,17.944,13.296,22.541,13.296z M22.541,6.521c4.089,0,7.54,1.4,7.54,3.06c0,1.658-3.451,3.059-7.54,3.059
c-4.087,0-7.541-1.4-7.541-3.059C15,7.922,18.454,6.521,22.541,6.521z"></path>
<path d="M25.038,34.037c-0.81,0.059-1.638,0.094-2.483,0.094c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.141-5.271-0.391c-0.432,0.524-0.979,1.191-1.664,2.022c-4.448-0.653-8.223-1.912-10.765-3.546
c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.173-5.81-2.753-7.378-4.609c-0.028,0.211-0.052,0.424-0.052,0.64v4.456
c0,5.266,9.721,9.548,21.694,9.58C22.864,38.741,23.758,36.27,25.038,34.037z M15.367,40.185c-4.541-0.69-8.359-2.021-10.854-3.729
v-3.733c2.611,1.679,6.406,2.976,10.854,3.658V40.185z"></path>
<path d="M22.083,45.084c0-0.699,0.041-1.388,0.104-2.069c-1.72-0.018-3.375-0.143-4.917-0.376c-0.432,0.524-0.979,1.189-1.664,2.02
c-4.448-0.652-8.223-1.912-10.765-3.544c1.288-0.355,2.376-0.659,3.312-0.915c-3.259-1.172-5.81-2.749-7.378-4.605
c-0.028,0.21-0.052,0.426-0.052,0.639v4.456c0,5.281,9.788,9.578,21.817,9.578c0.061,0,0.116-0.003,0.175-0.003
C22.316,48.6,22.083,46.868,22.083,45.084z M15.367,49.08c-4.541-0.69-8.359-2.017-10.854-3.728v-3.731
c2.611,1.679,6.406,2.974,10.854,3.655V49.08z"></path>
<path d="M23.161,51.904c-0.204,0.003-0.402,0.023-0.606,0.023c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.14-5.271-0.391c-0.432,0.524-0.979,1.189-1.664,2.023c-4.448-0.653-8.223-1.915-10.765-3.548
c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.172-5.81-2.752-7.378-4.611c-0.028,0.213-0.052,0.426-0.052,0.642v4.456
c0,5.282,9.788,9.581,21.817,9.581c1.519,0,2.999-0.069,4.427-0.198C25.3,56.883,23.998,54.499,23.161,51.904z M15.367,57.979
c-4.541-0.691-8.359-2.018-10.854-3.726v-3.736c2.611,1.679,6.406,2.976,10.854,3.657V57.979z"></path>
<path d="M44.359,22.805v-4.37c0-0.213-0.02-0.428-0.055-0.639c-1.568,1.858-4.119,3.437-7.375,4.608
c0.863,0.237,1.877,0.518,3.043,0.84C41.393,22.958,42.859,22.805,44.359,22.805z"></path>
<path d="M26.123,32.331c1.037-1.479,2.25-2.82,3.608-4.007v-0.846c0.454-0.069,0.897-0.151,1.341-0.232
c0.432-0.322,0.868-0.633,1.323-0.923c-0.933,0.207-1.9,0.391-2.909,0.539c-0.682-0.831-1.229-1.495-1.661-2.02
c-1.649,0.249-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
c-1.849,0-3.621-0.139-5.271-0.388c-0.432,0.524-0.979,1.188-1.664,2.021c-4.448-0.653-8.223-1.914-10.765-3.546
c1.288-0.355,2.376-0.657,3.312-0.914c-3.259-1.172-5.81-2.75-7.378-4.608c-0.028,0.211-0.052,0.426-0.052,0.639v4.456
c0,5.283,9.788,9.58,21.817,9.58C23.761,32.471,24.954,32.417,26.123,32.331z M15.367,31.285
c-4.541-0.693-8.359-2.018-10.854-3.728v-3.733c2.611,1.679,6.406,2.974,10.854,3.656V31.285z"></path>
<path d="M44.359,26.166c-10.445,0-18.914,8.469-18.914,18.918C25.446,55.53,33.914,64,44.359,64
c10.451,0,18.918-8.47,18.918-18.916C63.277,34.635,54.811,26.166,44.359,26.166z M53.428,46.976c0,0.49-0.402,0.889-0.891,0.889
h-5.393v5.393c0,0.49-0.4,0.893-0.891,0.893h-3.789c-0.486,0-0.889-0.402-0.889-0.893v-5.393h-5.393
c-0.488,0-0.889-0.398-0.889-0.889v-3.786c0-0.49,0.4-0.892,0.889-0.892h5.393v-5.393c0-0.489,0.402-0.886,0.889-0.886h3.789
c0.49,0,0.891,0.396,0.891,0.886v5.393h5.393c0.488,0,0.891,0.401,0.891,0.892V46.976z"></path>
</g>
</symbol>
</svg>
<div>
<svg class="shape-55 shape-style-1" fill="red">
<use xlink:href="#shape-1"></use>
</svg>
</div>
<div>
<svg class="shape-55 shape-style-2" fill="blue">
<use xlink:href="#shape-1"></use>
</svg>
</div>
</body>

How do I animate my name in SVG?

I want to write my name out in cursive SVG
So far I've gotten it partially working. But i want it to go from being blank to writing out my name. So far it just rewrites overtop of it. Also, is there a way to change the font family?
Fiddle
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>practice</title>
<script type="text/javascript" src="script.js">
</script>
<link href="test.scss" rel="stylesheet" />
<link href="svg.css" rel="stylesheet" />
</head>
<body>
<svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z" />
<text class="path" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="65" id="svg_1" y="330" x="528" stroke-width="2" stroke="#000000" fill="#000000">joshua</text>
</svg>
</body>
</html>
CSS
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear alternate infinite;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}

But i want it to go from being blank to writing out my name. So far it
just rewrites overtop of it.
Change fill="#000000 to fill="none".
Also, is there a way to change the font family?
Change the font-family attribute.
<text class="path" xml:space="preserve" text-anchor="middle"
font-family="Arial" font-size="65" id="svg_1" y="330" x="528"
stroke-width="2" stroke="#000000" fill="none">joshua</text>