How to style one particular SVG path in CSS? - html

Question

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.

Answer 1

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

Answer 2

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>

Answer 3

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>