How to override SVG path with CSS - css

A third party JavaScript library antd is required in my project, which contains a svg image, and I expect to override the svg path.
I have read this post : CSS change d property of path and learned to do it with d:path(). But That only replace one path with another path. This is a snippet from that post :
#demo svg path {
d: path('M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z') !important;
}
Is it possible to do a full replacement ?
For example :
The original svg
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path>
</svg>
The expected svg
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M942.2 486.2Q889.47 375.11 816.7 112z"></path>
<path d="M942.2 486.2Q889.47 375.11 816.7 112z"></path>
</svg>
I expect to replace one path of original svg with two paths. Or replace mutiple paths with a new path. I try to find a more flexible replacement.

Related

How to resize only 1 part of a SVG in order to fill the content

I understand that SVG actually doesn't have a content, but I am struglying with this problem and I can't solve during days.
I have a Figma (so I can get the SVG) with this design:
The problem is that "Your Collection" text needs to grow to the right in some situations, for example: When I translate the app to Spanish and I have to show: "Tu Coleccion", or some other languages with even longer texts.
In the Figma that shape is made by 2 shapes + an "UNION" rule from Figma:
body { background-color: #7fb6ff80;}
<svg width="188" height="71" viewBox="0 0 188 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_193_1631" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.3203 50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719H173C181.284 20.6719 188 27.3877 188 35.6719C188 43.9562 181.284 50.6719 173 50.6719H72.3203Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.3203 50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719H173C181.284 20.6719 188 27.3877 188 35.6719C188 43.9562 181.284 50.6719 173 50.6719H72.3203Z" fill="white"/>
<path d="M63.7839 15.7544L62.9621 16.3242L63.7839 15.7544ZM62.9621 55.0197C56.8225 63.8757 46.588 69.6719 35 69.6719V71.6719C47.2715 71.6719 58.1085 65.531 64.6057 56.1592L62.9621 55.0197ZM35 69.6719C16.2223 69.6719 1 54.4496 1 35.6719H-1C-1 55.5542 15.1177 71.6719 35 71.6719V69.6719ZM1 35.6719C1 16.8943 16.2223 1.67194 35 1.67194V-0.328064C15.1177 -0.328064 -1 15.7897 -1 35.6719H1ZM35 1.67194C46.588 1.67194 56.8225 7.4682 62.9621 16.3242L64.6057 15.1847C58.1085 5.81283 47.2715 -0.328064 35 -0.328064V1.67194ZM72.3203 21.6719H173V19.6719H72.3203V21.6719ZM173 21.6719C180.732 21.6719 187 27.9399 187 35.6719H189C189 26.8354 181.837 19.6719 173 19.6719V21.6719ZM187 35.6719C187 43.4039 180.732 49.6719 173 49.6719V51.6719C181.837 51.6719 189 44.5085 189 35.6719H187ZM173 49.6719H72.3203V51.6719H173V49.6719ZM62.9621 16.3242C65.0754 19.3724 68.4347 21.6719 72.3203 21.6719V19.6719C69.2571 19.6719 66.4515 17.8471 64.6057 15.1847L62.9621 16.3242ZM64.6057 56.1592C66.4515 53.4968 69.2571 51.6719 72.3203 51.6719V49.6719C68.4347 49.6719 65.0754 51.9714 62.9621 55.0197L64.6057 56.1592Z" fill="#F2F2F2" mask="url(#path-1-inside-1_193_1631)"/>
</svg>
Do you have any idea how could I change the width of that second part in order to fill the content, without changing the circle part?
Do you have any idea how to get this with CSS (without SVG)? The harder part with CSS is the curve that is in the union between the circle and the rectangle. The other part is simple.
I think it would be a good idea to have a "sliding doors" effect. So, here I made patterns for both the circle and the "text label". Switching between patterns with different sizes makes the text label resize.
This can be done dynamically if you look for the size of the text and then update the pattern based on that.
body { background-color: #7fb6ff80;}
svg {
display: block;
}
<svg width="0" height="0" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<pattern id="circle" viewBox="0 0 104 104" width="100%" height="100%">
<path transform="translate(2 2)" stroke="black" stroke-width="2" fill="none"
d="M 102 30 Q 97 30 92 23 Q 76 0 50 0 A 10 10 90 0 0 50 100 Q 76 100 92 77 Q 97 70 102 70"/>
</pattern>
<pattern id="p1_120" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(120 2)" stroke="gray" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
<pattern id="p1_140" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(140 2)" stroke="black" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
<pattern id="p1_160" viewBox="0 0 400 104" width="100%" height="100%">
<path transform="translate(160 2)" stroke="black" stroke-width="2" fill="none"
d="M -200 30 H 0 A 1 1 0 0 1 0 70 H -200"/>
</pattern>
</svg>
<svg id="svg01" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<rect x="104" width="400" height="104" fill="url(#p1_160)" />
<rect width="104" height="104" fill="url(#circle)"/>
<text x="110" y="53" dominant-baseline="middle" font-size="20"
font-family="sans-serif">Your Collection</text>
</svg>
<svg id="svg02" viewBox="0 0 400 104" xmlns="http://www.w3.org/2000/svg">
<rect x="104" width="400" height="104" fill="url(#p1_140)" />
<rect width="104" height="104" fill="url(#circle)"/>
<text x="110" y="53" dominant-baseline="middle" font-size="20"
font-family="sans-serif">Tu Coleccion</text>
</svg>

SVG - stroke-width not working although I am using stroke property

I am trying to make stroke width thinner but it is not working. I have tried stroke-width but didn't work.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g stroke="black" fill="#3F474E" stroke-width="0.2">
<path d="m488 248h-32v-18.800293c7.7072754 1.8276368 15.7418213 2.800293 24 2.800293h8v-16h-8c-48.5234375 0-88-39.4765625-88-88 0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88s-88-39.4765625-88-88c0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88h-8v16h8c8.2581787 0 16.2926636-.9726563 24-2.800293v18.800293h-32c-4.418457 0-8 3.5820313-8 8v32c0 4.4179688 3.581543 8 8 8h96v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h176v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h96c4.418457 0 8-3.5820313 8-8v-32c0-4.4179687-3.581543-8-8-8zm-48 0h-16v-32.3981934c5.0522461 3.2409668 10.4038086 6.0529785 16 8.3935547zm-32-45.026123v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-144 64.637207v-32.3981934c5.0522461 3.2409668 10.4038696 6.0529785 16 8.3935547v24.0046387zm32-18.800293c5.1953735 1.2319336 10.5383911 2.078125 16 2.4956055v16.3046875h-16zm32 2.4956055c5.4616699-.4174805 10.8046875-1.2636719 16-2.4956055v18.800293h-16zm32-7.6999512c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-112-21.0214843v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-48 40.6325683c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-40 56.0046387v-16h88v16zm140.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm32-48v-16h176v16zm228.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm120-48h-88v-16h88z" stroke="black" stroke-width="0.2"></path>
</g>
</svg>
It's work, but when you use stroke-width = 0.2 its color merges with fill color. Try to use more lighter fill color. When you use stroke-width < 1 drawing engine uses more lighter colors to draw subpixel objects
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g stroke="black" fill="white" stroke-width="0.2">
<path d="m488 248h-32v-18.800293c7.7072754 1.8276368 15.7418213 2.800293 24 2.800293h8v-16h-8c-48.5234375 0-88-39.4765625-88-88 0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88s-88-39.4765625-88-88c0-4.4179688-3.581543-8-8-8h-32c-4.418457 0-8 3.5820313-8 8 0 48.5234375-39.4765625 88-88 88h-8v16h8c8.2581787 0 16.2926636-.9726563 24-2.800293v18.800293h-32c-4.418457 0-8 3.5820313-8 8v32c0 4.4179688 3.581543 8 8 8h96v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h176v32c-3.4433594 0-6.5004883 2.203125-7.5893555 5.4697266l-16 48c-.8134766 2.4404297-.4042969 5.1220703 1.0996094 7.2080078 1.503418 2.0859375 3.9179688 3.3222656 6.4897461 3.3222656h80c2.5717773 0 4.9863281-1.2363281 6.4897461-3.3222656 1.5039063-2.0859375 1.9130859-4.7675781 1.0996094-7.2080078l-16-48c-1.0888672-3.2666016-4.1459961-5.4697266-7.5893555-5.4697266v-32h96c4.418457 0 8-3.5820313 8-8v-32c0-4.4179687-3.581543-8-8-8zm-48 0h-16v-32.3981934c5.0522461 3.2409668 10.4038086 6.0529785 16 8.3935547zm-32-45.026123v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-144 64.637207v-32.3981934c5.0522461 3.2409668 10.4038696 6.0529785 16 8.3935547v24.0046387zm32-18.800293c5.1953735 1.2319336 10.5383911 2.078125 16 2.4956055v16.3046875h-16zm32 2.4956055c5.4616699-.4174805 10.8046875-1.2636719 16-2.4956055v18.800293h-16zm32-7.6999512c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-112-21.0214843v45.026123h-16v-64.637207c4.529541 7.1740722 9.9089355 13.7592773 16 19.611084zm-64-19.611084v64.637207h-16v-45.026123c6.0910645-5.8518067 11.470459-12.4370118 16-19.611084zm-48 40.6325683c5.5960693-2.3405762 10.9477539-5.1525879 16-8.3935547v32.3981934h-16zm-40 56.0046387v-16h88v16zm140.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm32-48v-16h176v16zm228.9003906 96h-57.8007813l10.6665039-32h2.2338868 32 2.2338867zm-36.9003906-48v-192h16v192zm120-48h-88v-16h88z"></path>
</g>
</svg>

SVG with text and graphic - how to style with CSS

Trying to convert my auto-generated charts from PNG to SVG. Chart and axis are easy, but I don't know how to implement the legend in a nice + good-looking way.
My results so far are looking like this:
https://jsfiddle.net/m4zuqk12/ , an (absolute) minimum example would be:
graph.svg:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet href="graph.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="768" version="1.1">
<g class="trajectory trajectory-b">
<path d="M 142 307 L 333 307 L 333 242 L 353 242" fill="none"/>
<path d="M 100 718 m 0 11.5 l 50 0"/>
<text x="160" y="733" class="legend">Graph 2</text>
</g>
<g class="trajectory trajectory-c">
<path d="M 177 357 L 325 357 L 325 450 L 431 450" fill="none"/>
<path d="M 562 718 m 0 11.5 l 50 0"/>
<text x="622" y="733" class="legend">Graph 3</text>
</g>
<g class="trajectory trajectory-d">
<path d="M 232 542 L 332 542 L 332 507 L 432 507" fill="none"/>
<path d="M 100 718 m 0 34.5 l 50 0"/>
<text x="160" class="legend"><tspan dy="1.2em">Graph 4</tspan></text>
</g>
<g class="legend">
<path class="trajectory-b" d="M 100 668 m 0 11.5 l 50 0"/>
<path class="trajectory-c" d="M 562 668 m 0 11.5 l 50 0"/>
<path class="trajectory-d" d="M 100 668 m 0 34.5 l 50 0"/>
<text x="100" y="668">
<tspan class="trajectory-b" x="160" dy="1.2em">Graph 2</tspan>
<tspan class="trajectory-c" x="622" dy="0">Graph 3</tspan>
<tspan class="trajectory-d" x="160" dy="1.2em">Graph 4</tspan>
</text>
</g>
</svg>
graph.css:
g.axis {
stroke: black;
}
.legend .trajectory-b,
g.trajectory-b {
stroke: red;
fill: red;
}
.legend .trajectory-c,
g.trajectory-c {
stroke: green;
fill: green;
}
.legend .trajectory-d,
g.trajectory-d {
stroke: blue;
fill: blue;
}
g.trajectory:hover path {
stroke-width: 5px;
}
Note there are two legends: The upper one has better text placement but no hover-effects, the lower one has hover-effects, but worse placement.
Upper legend: seems to be a proper way to write multi-line texts; but I do not see any way to access the graphs via CSS this way - is there?
Lower legend: the texts are written within the of the respective graph. This way, hover-effects via CSS are easy, but I have to guess the y-positions (which ist not possible in real life, because the styling is left to different CSS-designers). Is it possible to simulate the 1.2em-placement? I know that I'd have to wait vor SVG2.0 to use "100px+1.2em", but perhaps there is a way to work around this limitation?
Bonus problem: how to place the lines in front of the legend text? I can't see any way at all to do this properly.

CSS change d property of <path>

I have a generated svg path code, I want to override it with CSS file to change the svg shape.
I could override all the properties except 'd':
Here is the generated code (I can't change it directly):
<div id="map_outer" style="position: absolute; left: 3px; z-index: 1;">
<svg height="35" version="1.1" width="35" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaƫl 2.1.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</defs>
<path fill="#cecece" stroke="#808080" d="M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z" stroke-width="40" stroke-opacity="1" fill-opacity="1" transform="matrix(0.05,0,0,0.05,-1.9,-5.7)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; fill-opacity: 1; cursor: pointer;">
</path>
</svg>
</div>
Here is the CSS to override the d value, I get
Unknown property name
in the CSS inspector !!! :
#map_outer svg path{
fill: rgb(255, 204, 0) !important;
d:"M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z" !important;
stroke-width: 0;
}
You're almost on the right track here, you just need to set the correct value for the property. It's missing path('..'):
#map_outer svg path {
d: path('M 850 300 C 850 300 350 300 350 300 L 348.1 205.39 L 120 400.39 L 348.1 606.19 L 350 500 C 850 500 850 500 850 500 z') !important;
}
Add a id to your <path d="..."></path> and then the JavaScript code with the new path:
<svg>
<path d="..." id="myPath></path>
</svg>
<script>
document.getElementById("myPath").setAttribute("d", "M 0 0 L 0 50 L 50 50");
</script>
Here's an example:
<html>
<body>
<svg>
<path d="M 0 0 L 50 0 L 50 50" id="myPath" />
</svg>
<script>
document.getElementById("myPath").setAttribute("d", "M 0 0 L 0 50 L 50 50");
</script>
</body>
</html>

style specific path of SVG all browsers

IS it possible to style a specific path of an SVG in all browsers? I have tried this:
HTML
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-facebook" viewBox="0 0 1024 1024">
<title>facebook</title>
<path class="path1" d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512c281.6 0 512 230.4 512 512s-230.4 512-512 512zM512 66.56c-245.76 0-445.44 199.68-445.44 445.44s199.68 445.44 445.44 445.44 445.44-199.68 445.44-445.44-199.68-445.44-445.44-445.44z"></path>
<path class="path2" d="M391.68 770.56c0 2.56 5.12 5.12 7.68 2.56s43.52-51.2 56.32-99.84c2.56-12.8 23.040-81.92 23.040-81.92 10.24 20.48 43.52 38.4 76.8 38.4 99.84 0 166.4-89.6 166.4-207.36 0-89.6-76.8-174.080-197.12-174.080-148.48 0-222.72 102.4-222.72 189.44 0 51.2 20.48 97.28 64 115.2 7.68 2.56 12.8 0 15.36-7.68 2.56-5.12 5.12-17.92 5.12-23.040 2.56-7.68 2.56-10.24-5.12-17.92-12.8-15.36-20.48-33.28-20.48-58.88 0-76.8 58.88-145.92 153.6-145.92 84.48 0 128 48.64 128 115.2 0 87.040-38.4 161.28-97.28 161.28-33.28 0-56.32-25.6-48.64-58.88 10.24-38.4 28.16-79.36 28.16-107.52 0-25.6-12.8-46.080-40.96-46.080-33.28 0-58.88 33.28-58.88 79.36 0 28.16 10.24 48.64 10.24 48.64s-33.28 140.8-40.96 163.84c-12.8 51.2-2.56 110.080-2.56 115.2z"></path>
<path class="path3" d="M990.72 512c0 264.39-214.33 478.72-478.72 478.72s-478.72-214.33-478.72-478.72c0-264.39 214.33-478.72 478.72-478.72s478.72 214.33 478.72 478.72z"></path>
<path class="path4" d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512 512 230.4 512 512-230.4 512-512 512zM512 66.56c-245.76 0-445.44 199.68-445.44 445.44s199.68 445.44 445.44 445.44 445.44-199.68 445.44-445.44c0-245.76-199.68-445.44-445.44-445.44z"></path>
<path class="path5" d="M442.88 770.56h102.4c0 0 0-143.36 0-258.56h76.8l10.24-102.4h-81.92v-40.96c0-20.48 12.8-25.6 23.040-25.6s58.88 0 58.88 0v-87.040h-79.36c-87.040 0-107.52 66.56-107.52 107.52v46.080h-51.2v102.4h51.2c-2.56 117.76-2.56 258.56-2.56 258.56z"></path>
</symbol>
</defs>
</svg>
<svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg>
CSS
#icon-facebook .path1, #icon-facebook .path2, #icon-facebook .path3, #icon-facebook .path4 {
fill: rgb(255, 255, 255);
}
#icon-facebook .path5, #icon-facebook .path1, #icon-facebook .path4 {
fill: rgb(109, 103, 101);
}
IT works in Firefox but not in safari, chrome internet explorer, is it not possible?

Resources