<svg> is larger than <use> - html

I need to import svg from sprite by <use> tag so svg and use were the same size (use was as large as parent svg tag).
<svg>
<use xlink:href="#facebook-hover"></use>
</svg>
I have no idea what exactly causes that size difference, and how could I fix it.
Here is my demo, for those who would like to help me:
svg {
width: 200px;
height: 200px;
position: relative;
}
use {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<svg width="0" height="0" class="hidden">
<symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 44 44" id="facebook-hover">
<title>ThirdParty/Facebook/2xpng1. Liquorice</title>
<defs>
<polygon id="path-1" points="0.001 0 40 0 40 40 0.001 40"></polygon>
</defs>
<g id="ThirdParty/Facebook/1.-Liquorice" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-3" transform="translate(2.000000, 2.000000)">
<g id="Clip-2"></g>
<path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88" mask="url(#mask-2)"></path>
</g>
</g>
</symbol>
</svg>
<svg>
<use xlink:href="#facebook-hover"></use>
</svg>


As I've commented: use a viewBox for the second svg. Try <svg viewBox="0 0 40 40"><use ...
Also: in css you are forcing both evg elements to a 200px / 200px size. You can add width="200" instead.
Also: the css roules for use are pointless.
Also: you are putting a useless polygon inside a useless <defs> inside the symbol. You can delete the defs.
More: The path is wrapped inside lots of groups. There is an empty group too. The path is masked by an inexistent mask-2.
I've removed the useless groups and the mask attribute. Please take a look:
<svg width="0" height="0" class="hidden">
<symbol id="facebook-hover">
<title>ThirdParty/Facebook/2xpng1. Liquorice</title>
<path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88"></path>
</symbol>
</svg>
<svg viewBox="0 0 40 40" width="200">
<use xlink:href="#facebook-hover"></use>
</svg>

Related

Why doesn't an SVG with a <use> tag scale like a regular SVG?

I have an SVG icon, I'm setting a fixed height for it (50px, say), but I want its width to be auto, that is, whatever it needs to be depending on the icon. (Pretty common and normal scenario, right?).
Now, the problem that I've been beating my head against the wall for, is that instead of embedding the SVG inline in the HTML, I'm intending to define it with the <symbol> tag and then reference it using the <use href="... tag, and doing so apparently requires me to set a fixed width as well as a fixed height or otherwise it will always default to about 150px, instead of just defaulting to the width of icon; this is not the case when you embed the SVG directly, you can see all of this in action in the following two snippets:
Directly-embedded SVG: (Works as expected, width is consistent with the width of the icon)
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg class="icon" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)"> <g transform="translate(42.667)"> <path class="a" d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557A3.429,3.429,0,0,0,62.074,9.133Zm-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375ZM63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142H62.074a1.143,1.143,0,0,1,1.142,1.142Z" transform="translate(-42.667)"></path> </g> <g transform="translate(50.658 13.128)"> <path class="a" d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Zm0,4.566a1.142,1.142,0,1,1,1.142-1.142A1.143,1.143,0,0,1,195.425,249.9Z" transform="translate(-192 -245.333)"></path> </g> </g>
</svg>
But using the <use> tag: (Width is coming from nowhere!)
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg style="display: none;">
<symbol id="lock" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)"> <g transform="translate(42.667)"> <path class="a" d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557A3.429,3.429,0,0,0,62.074,9.133Zm-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375ZM63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142H62.074a1.143,1.143,0,0,1,1.142,1.142Z" transform="translate(-42.667)" /> </g> <g transform="translate(50.658 13.128)"> <path class="a" d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Zm0,4.566a1.142,1.142,0,1,1,1.142-1.142A1.143,1.143,0,0,1,195.425,249.9Z" transform="translate(-192 -245.333)" /> </g> </g>
</symbol>
</svg>
<svg class="icon">
<use href="#lock"></use>
</svg>
I've already checked out this question, as well as this one, and I've realized that by adding the "viewBox" of the icon to the referencing SVG, the problem would be solved, like this:
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg style="display: none;">
<symbol id="lock" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)"> <g transform="translate(42.667)"> <path class="a" d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557A3.429,3.429,0,0,0,62.074,9.133Zm-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375ZM63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142H62.074a1.143,1.143,0,0,1,1.142,1.142Z" transform="translate(-42.667)" /> </g> <g transform="translate(50.658 13.128)"> <path class="a" d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Zm0,4.566a1.142,1.142,0,1,1,1.142-1.142A1.143,1.143,0,0,1,195.425,249.9Z" transform="translate(-192 -245.333)" /> </g> </g>
</symbol>
</svg>
<svg class="icon" viewBox="0 0 22.832 27.398"> <!-- Copy-pasted the viewbox here -->
<use href="#lock"></use>
</svg>
But obviously this is very inconvenient, repetitive, error-prone, and indeed ugly to write. So, I'd appreciate any workarounds. Isn't there a way to set the viewBox attribute to "auto" or something which means "whatever the inner SVG is", so as to avoid writing (or copy-pasting, rather) the viewBox each time you want to reference an icon?
To be honest, I think everyone would intuitively kind of expect this to work like regular embedded SVGs since the viewBox is already set once on the symbol that is being referenced.

I'd highly recommend:
Make all your icons have a consistent viewBox. For example, "0 0 24 24" is a common one that many icon libraries use. That way you don't have to find and copy the correct viewBox where you need it. It's always "0 0 24 24".
Add a class to the referencing <svg> that you can use for setting the icon width.
<svg class="icon lock" viewBox="0 0 24 24">
<use href="#lock"></use>
</svg>
Then in your CSS:
.icon {
// as above
}
.icon.lock {
width: 45px;
height: 50px;
}
.icon.something-else {
width: 35px;
height: 50px;
}
As long as your icon is horizontally centred in its viewBox, everything will work.
Default size (square) icons need no extra CSS. You only need to add a CSS rule for the non-square ones.

If you're not opposed to using some JavaScript, the following should work. Load it once, no matter how many icons you have on your page.
document.querySelectorAll(".icon").forEach(node => {
const href = node.querySelector("use").href.baseVal;
const icon = document.querySelector(href);
const vb = icon.viewBox.baseVal;
node.setAttribute("viewBox", `${vb.x} ${vb.y} ${vb.width} ${vb.height}`);
});
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg style="display: none;">
<symbol id="lock" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)">
<g transform="translate(42.667)">
<path
class="a"
d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133
a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4
H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557
A3.429,3.429,0,0,0,62.074,9.133Z
m-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375Z
M63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092
a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142
H62.074a1.143,1.143,0,0,1,1.142,1.142Z"
transform="translate(-42.667)">
</path>
</g>
<g transform="translate(50.658 13.128)">
<path
class="a"
d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922
a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Z
m0,4.566a1.142,1.142,0,1,1,1.142-1.142
A1.143,1.143,0,0,1,195.425,249.9Z"
transform="translate(-192 -245.333)">
</path>
</g>
</g>
</symbol>
</svg>
<svg class="icon">
<use href="#lock"></use>
</svg>
If you want to add icons dynamically - after page load, the following would also be an improvement over adding a manual viewBox:
function iconLoaded(event) {
const node = event.target;
const href = node.querySelector("use").href.baseVal;
const icon = document.querySelector(href);
const vb = icon.viewBox.baseVal;
node.setAttribute("viewBox", `${vb.x} ${vb.y} ${vb.width} ${vb.height}`);
}
.icon {
height: 50px;
width: auto;
/* Aesthetics: */
background-color: gray;
border-radius: 5px;
}
<svg style="display: none;">
<symbol id="lock" viewBox="0 0 22.832 27.398">
<g transform="translate(-42.667)">
<g transform="translate(42.667)">
<path
class="a"
d="M62.074,9.133V7.991a7.991,7.991,0,1,0-15.982,0V9.133
a3.429,3.429,0,0,0-3.425,3.425V23.973A3.429,3.429,0,0,0,46.092,27.4
H62.074A3.429,3.429,0,0,0,65.5,23.973V12.557
A3.429,3.429,0,0,0,62.074,9.133Z
m-13.7-1.142a5.708,5.708,0,0,1,11.416,0V9.133H48.375Z
M63.216,23.973a1.143,1.143,0,0,1-1.142,1.142H46.092
a1.143,1.143,0,0,1-1.142-1.142V12.557a1.143,1.143,0,0,1,1.142-1.142
H62.074a1.143,1.143,0,0,1,1.142,1.142Z"
transform="translate(-42.667)">
</path>
</g>
<g transform="translate(50.658 13.128)">
<path
class="a"
d="M195.425,245.333a3.416,3.416,0,0,0-1.142,6.639v1.922
a1.142,1.142,0,1,0,2.283,0v-1.922a3.416,3.416,0,0,0-1.142-6.639Z
m0,4.566a1.142,1.142,0,1,1,1.142-1.142
A1.143,1.143,0,0,1,195.425,249.9Z"
transform="translate(-192 -245.333)">
</path>
</g>
</g>
</symbol>
</svg>
<svg class="icon" onload="iconLoaded(event)">
<use href="#lock"></use>
</svg>

How can I see the icons inside the SVG file?

I want to see all the icons inside the SVG file. I have tried to insert it into the HTML file with an img tag but I see a blank page.
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-triangle-left" viewBox="0 0 20 20">
<title>triangle-left</title>
<path d="M14 5v10l-9-5 9-5z"></path>
</symbol>
<symbol id="icon-triangle-right" viewBox="0 0 20 20">
<title>triangle-right</title>
<path d="M15 10l-9 5v-10l9 5z"></path>
</symbol>
<symbol id="icon-check" viewBox="0 0 20 20">
<title>check</title>
<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
</symbol>
</defs>
</svg>

The code you provided contains only <symbols>. This is used to house SVG definitions that can be reused in different parts of the document. You would use them like this:
<svg>
<use xlink:href="#icon-triangle-left" />
</svg>
Live test: https://codepen.io/guilhermemuller/pen/NWqddGp

How change path and polyline in SVG?

I have two icons in svg.
Updated:
one
two
First of all, is it possible to make this icons using same markup?
For example:
<g>
<circle ... />
<path ... />
</g>?
Because i can operate only with classes. That mean that i want to change their styles in css and that why i want same markup for both icons.
Also i want remove cx="9" cy="9" from both icons, because this icon is part of the <rect /> and should be placed strictly on the verge of this <rect />. And this cx and cy move it sideways. If i just remove them, then icon become broken a bit. I need to change attributes of path and polyline also. How i can do it? Thank you

As for your re-use of SVG that part already has an answer here:
Inline SVG in CSS
You can do a lot with this using just CSS for example:
.firstxxx,
.secondxxx {
position: relative;
display: block;
top: -1.1em;
left: 6em;
}
.secondxxx circle{fill:blue;}
.containerthing {
height: 4em;
}
<div class="containerthing">1. One
<svg class="firstxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
</div>
<div class="containerthing">2. Two
<svg class="secondxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
</div>

I don't know why, but if you want to remove cx="9" cy="9", you can use transform: translate()
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" r="9" transform="translate(9, 9)"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>

You can position the shape where you want and reference the SVG through xlink:href in the shape's attributes definition along with a specific markup through the JointJS Devs plugin. E.g.:
joint.shapes.devs.Model.define('app.MyWindow', {
markup: `<image/><text/>`,
position: {
x: 100,
y: 100
},
size: {
width: 10,
height: 10
},
attrs: {
image: {
width: 8,
height: 8,
'xlink:href': 'assets/my_svg.svg'
},
}
});

Animate height of SVG without changing proportions of background image

I'm trying to create an accordion using SVG shapes, I am using SVGs because my sections do not have regular shapes.
I created this shape using SVG clipPath
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1276.4 270" style="enable-background:new 0 0 1276.4 270;">
<style type="text/css">
.st0{display:none;clip-path:url(#XMLID_111_);}
.st1{display:inline;}
</style>
<g id="XMLID_5_">
<defs>
<path id="XMLID_1_" d="M414.5,2.2c-27.6,1.7-55.2,2.9-82.7,0.9c-10.7,0.4-21.4,0.9-32.1,1.5c-33.9,1.8-67.8,5-101.7,5.8
C163.7,11.2,129.3,10.1,95,9c-31.7-1-63.3-2.1-95-1.6v126.3l0.2,121.8c160.1-23.4,321.4-2.1,482.2,4.8c86.7,3.7,173.1,0,259.5-7.6
c42.7-3.7,85.1-9.3,128-7.3c44.5,2.1,88.7,8.5,132.8,14.5c25,3.3,50,6.4,75.2,8.3c27.5,2,55,2,82.6,1.5c39-0.7,78-2.6,116.9-6.1
V137.8l-0.2-126.1c-7.6,0.2-15.3,0.1-23-0.3c-20.8-1-41.6-3-62.5-3.6c-43.4-1.3-86.8-0.8-130.2-2c-43.7-1.1-87.3-3.1-131-2.3
c-43.1,0.8-86.1,3.2-129.2,4.7c-43.6,1.5-87.1,1.8-130.7-0.1c-43.7-1.9-87.2-5-130.9-6.9C521.9,0.4,504.1,0,486.4,0
C462.5,0,438.5,0.7,414.5,2.2"/>
</defs>
<use xlink:href="#XMLID_1_" style="overflow:visible;fill:#525252;"/>
<clipPath id="shape_1">
<use xlink:href="#XMLID_1_" style="overflow:visible;"/>
</clipPath>
</g>
<image clip-path="url(#shape_1)" width="2000" height="1700" xlink:href="dummy_url.jpg" preserveAspectRatio="xMidYMin slice"></image>
</svg>
When you click on a section it should expand in height. My problem is that I can't change the height of the SVG without ruining the background image's proportions. If there is an alternative to using SVGs in this situation I would be open to it, thank you very much.

Have you thought of using the image(s) as fill for your svg elements instead of image?
Some junk code for this type of pattern would look something like this:
<rect x="-50" width="100%" height="100%" style="max-width=950px" fill="url(#your-id)" rx="6" ry="6" id="background-panel"/>
<defs>
<pattern id="your-id" patternUnits="userSpaceOnUse" x="120" y="170" width="650" height="547">
<image xlink:href="dummy_url.jpg" width="650" height="547" opacity="1"/>
</pattern>
</defs>
that way you can change the size of the path (in this case, the rect) and it won't change the size/proportions of the image, it will just reveal more of it.

I managed to do it by creating one svg:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2315.2 989" style="enable-background:new 0 0 2315.2 989;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#XMLID_45_);fill-rule:evenodd;clip-rule:evenodd;fill:#913B58;}
</style>
<g id="XMLID_30_">
<g id="XMLID_31_">
<defs>
<rect id="XMLID_2_" x="1.5" width="2313.9" height="987.8"/>
</defs>
<clipPath id="shape_1">
<use xlink:href="#XMLID_1_" style="overflow:visible;"/>
</clipPath>
<path id="XMLID_1_" class="st0" d="M875.1,970.2c157.1,6.7,313.5-0.1,470-13.8c77.3-6.8,154.1-16.8,231.8-13.2
c80.6,3.7,160.6,15.5,240.5,26.3c45.2,6,90.6,11.7,136.1,15c49.8,3.7,99.7,3.7,149.6,2.8c70.8-1.3,141.6-4.7,212.1-11.1l-0.4-955
c-13.8,0.3-27.7,0.1-41.7-0.5c-37.7-1.8-75.4-5.5-113.1-6.6c-78.6-2.3-157.3-1.5-235.9-3.6c-79.1-2.1-158.2-5.6-237.3-4.2
c-78,1.4-155.9,5.7-233.9,8.5c-78.9,2.8-157.7,3.2-236.6-0.2c-79.1-3.4-158-9.1-237-12.5c-75.9-3.3-151-2.8-226.8,1.9
c-50,3.1-100.1,5.2-149.8,1.6c-19.4,0.8-38.7,1.7-58.1,2.7c-61.4,3.3-122.8,9-184.2,10.5c-119.7,2.9-239.3-7.3-359-5.4l0.4,948.1
C291.8,919.2,583.9,957.8,875.1,970.2"/>
</g>
</g>
</svg>
I created a div for each year containing an image container
<div class="year">
<div class="image-container" style="background-image: url(<?php the_sub_field('image') ?>);"></div>
</div>
Then I specified the svg to the clip-path property of the image container in CSS
.image-container{
clip-path: url(#shape_1);
background-size: cover;
background-repeat: no-repeat;
padding-top: 40%;
background-position-y: 27%;
position: relative;
}
I partially overlapped the years so instead of trying to expand the year containers I just slide down all the years after the one clicked by using margin-top:
$('.year').each(function(){
var pYearIndex = $(this).index();
if(pYearIndex>1){
$(this).addClass('not-first');
}
var begin = 0;
var translated = (pYearIndex*(-3))+begin;
});
$('.year').on('click',function() {
var nYears = $('.year').length;
var thisYear = $(this).index();
if($(this).hasClass('to_show')){
$(this).removeClass('to_show');
$('.expanded').removeClass('expanded');
$('footer').css('margin-top', '-22%');
}
else{
$('.expanded').removeClass('expanded');
$('.to_show').removeClass('to_show');
$(this).addClass('to_show');
if(thisYear<nYears){
$('.year').eq(thisYear).addClass('expanded');
$('footer').css('margin-top', '-22%');
}
else{
$('footer').css('margin-top','-2%');
}
}
});

svg: change fill color using css

I have this svg file which I want to use with different colors
I have tried the following
<object type="image/svg+xml" width="100" height="100" data="todo.svg">
<span/>
</object>
(Not sure if OBJECT is the correct element for this)
Here is the content of todo.svg
<svg version="1.1" id="Layer_1" xmlns="..." x="0px" y="0px"
width="156px" height="141.6px" viewBox="0 0 156 141.6" enable-background="new 0 0 156 141.6" xml:space="preserve">
<g>
....
<g id="bar">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="..."/>
</g>
</g>
....
So in the css I tried to style this as follows
#bar path { fill: #444; }
Doesn't work :( Any suggestions how I can change this svg property using css ?