SVG - stroke-width not working although I am using stroke property - css
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>
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>
How to make an Scale from the center while hovering using framer motion
below i got an svg icon that scale up in size while hovering but it doesnt seem to scale from the center , how i can fix that? appreciate your feedback
<motion.svg
xmlns="http://www.w3.org/2000/svg"
height="42px"
viewBox="0 0 24 24"
width="42px"
fill="#FFFFFF"
whileHover={{
scale: 1.3,
}}
>
<path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
<path d="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h5v12H1z" />
</motion.svg>
The width and height don't match the viewBox properties (24 vs 42). If you make those match it should scale from the center.
Edit:
You might have better luck wrapping the SVG in a div and using that to set the size you want:
<motion.div
whileHover={{
scale: 1.3
}}
style={{ width: 64, height: 64 }}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="100%"
width="100%"
viewBox="0 0 24 24"
fill="#000"
>
<path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
<path d="M9 21h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.58 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2zM9 9l4.34-4.34L12 10h9v2l-3 7H9V9zM1 9h5v12H1z" />
</svg>
</motion.div>
Calculate dashed progress path in SVG circle
I'm building a progress circle that represents a users level up to three. It contains three dashes around the perimeter. A darker line that overlaps each dash will represent the user's progress. If a user is level one, the first dash should be overlapped by an amount equal to (their current experience / total experience to next level). If the user is level two, the first dash should be fully overlapped and the second dash should be the same as the above and so on. I've built my SVG circle with the following code: <svg width="240" height="240" viewBox="0 0 240 240" strokeWidth="2px" strokeDasharray="220 10" strokeDashoffset="50" > <circle cx="120" cy="120" r="110" fill="white" stroke="turquoise" /> </svg> This image represents a user that is on level two and about halfway through to level three. How could I calculate a <path> to overlap the circle and display the user's progress?
This is how you'd do it with an arc path. Draw the arc from the bottom of the circle to +1 unit in the x axis. Set the pathLength="100" so you can calculate the required dash array appropriately. Then make sure your dash-array adds up to 100. Note - you can't use a round line-cap for this method - there is a bug in Chrome that adds an incorrect line-cap at the end of the stroke-dash array. <svg width="240px" height="240px" viewBox="0 0 240 240" stroke-width="4" stroke-dasharray="220 10" stroke-dashoffset="50" stroke-linecap ="none"> <circle cx="120" cy="120" r="110" fill="white" stroke="turquoise" /> <path pathLength="100" d="M120 230 a 110 110 0 1 1 1 0" stroke="red" fill="none" stroke-width="8" stroke-dasharray="0 1 32 1 15 50" stroke-dashoffset="0"/> </svg>
I question your design for readability:
This design is based on Google Analystics graphs:
Dev To Blogpost on how to built Graphs with Web Components
Web Component source: https://progress-circle.github.io/element.js:
All HTML Required:
<script src="https://progress-circle.github.io/element.js"></script>
<progress-circle edge="grey">
<style>
svg {
font: 16px arial;
height: 180px;
}
</style>
<progress value="75%" stroke="green">Level I</progress>
<progress value="60%" stroke="orange">Level II</progress>
<progress value="50%" stroke="orangered">Level III</progress>
</progress-circle>
Here you can control the length of each path by setting the stroke-dasharray. The first number is the length (between 0 and 94 (2*PI*45/3 = 94)) and the second number is the space between strokes (this should just be more than 284).
In this example the red path is 50% length. You need to experiment a bit with the numbers.
var dist = 6;
console.log('Length of 1/3 circle:', Math.round(2 * Math.PI * 45 / 3)-dist);
console.log('Rotate <g> slightly:',-Math.round(2 * Math.PI * 45 / 12)-(dist/2));
<div id="progress">
<svg viewBox="0 0 100 100" width="300" height="300">
<g transform="translate(50 50) rotate(-27)">
<path transform="rotate(0)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="44 400" stroke-dashoffset="0" stroke="red" fill="none" stroke-linecap="round"/>
<path transform="rotate(120)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="88 400" stroke-dashoffset="0" stroke="navy" fill="none" stroke-linecap="round"/>
<path transform="rotate(240)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="88 400" stroke-dashoffset="0" stroke="orange" fill="none" stroke-linecap="round"/>
</g>
</svg>
</div>
Cordova css properties not working same in all devices
I am using ionic framework to build my next app. I am trying to set a background svg image to body, in desktop browsers(firefox & chrome) it is perfect, on my nexus 4 the background image is perfect, but when I tried in my friends device i.e. Xiaomi Redmi, the background image position is not proper, it shows some gap from top and bottom.
Here is the screenshot of nexus:
Screenshot of xiaomi:
As you can see that background position is not starting from top.
When I checked in another device .i.e Alcatel, the gap still remains but this time it is bigger. In motorola g and samsung galaxy S5, image is perfect.
This is the CSS code applied to body:
body {
background-image: url("../img/bg.svg") !important;
background-repeat:no-repeat !important;
background-position:0 0 !important;
height:100vh !important;
width:100% !important;
background-size:100% 100% !important;
padding:0 !important;
margin:0 !important;
position:relative !important;
background-attachment:fixed !important;
}
Here is my SVG file
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW X6 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.06666in" height="1.6in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 1067 1600"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.fil13 {fill:none}
.fil10 {fill:#3C8071}
.fil9 {fill:#44693E}
.fil5 {fill:#4F7544}
.fil4 {fill:#659676}
.fil3 {fill:#738962}
.fil1 {fill:#87A790}
.fil6 {fill:#B2922F}
.fil7 {fill:#B47D2A}
.fil8 {fill:#B8A636}
.fil2 {fill:#E6E9D4}
.fil12 {fill:#F5F2D3}
.fil11 {fill:#F6F1D4}
.fil14 {fill:#373435;fill-opacity:0.149020}
.fil0 {fill:url(#id1)}
]]>
</style>
<clipPath id="id0">
<path d="M0 0l1067 0 0 1600 -1067 0 0 -1600z"/>
</clipPath>
<linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="533.331" y1="237.996" x2="533.331" y2="1360.45">
<stop offset="0" style="stop-color:#86CACB"/>
<stop offset="0.721569" style="stop-color:#BDDFDB"/>
<stop offset="1" style="stop-color:#F5F5EC"/>
</linearGradient>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g>
</g>
<g style="clip-path:url(#id0)">
<g>
<rect class="fil0" x="-74" y="-3" width="1214" height="1604"/>
<path class="fil1" d="M-74 1473l0 -315c88,65 158,315 158,315l-158 0z"/>
<path class="fil2" d="M-74 1233l0 -74c19,14 37,36 53,62 -1,1 -2,1 -3,1 -6,-2 -39,-16 -39,-16l-1 34 -9 -6z"/>
<path class="fil1" d="M1140 1170l0 290 -179 0c0,0 90,-271 179,-290z"/>
<path class="fil3" d="M384 1458c0,0 254,-474 335,-476 80,-3 329,464 329,464l-664 12z"/>
<path class="fil4" d="M52 1457c0,0 123,-296 240,-292 117,5 218,292 218,292l-458 0z"/>
<path class="fil1" d="M267 1451c0,0 98,-296 191,-292 93,5 173,292 173,292l-364 0z"/>
<path class="fil5" d="M1109 1350c0,13 2,22 7,27 0,0 -5,0 -8,-2 2,8 5,15 9,20 0,0 -6,-1 -9,-2 3,7 6,13 10,18 -11,0 -21,0 -32,0 5,-4 10,-10 14,-18 -3,1 -9,1 -9,1 4,-4 9,-10 13,-20 -3,2 -7,3 -8,3 6,-4 11,-13 14,-29z"/>
<path class="fil6" d="M423 1474c-67,-24 -140,-49 -222,-56 -126,-11 -201,34 -274,10l0 18 0 155 1214 0 0 -118 0 -43 0 -26c-169,-57 -281,3 -368,55 -44,26 -82,50 -118,56 -69,10 -145,-20 -232,-51z"/>
<path class="fil7" d="M888 1414c-79,0 -139,17 -183,26 -24,5 -43,8 -57,4 -19,-5 -46,-12 -81,-18 -73,-12 -175,-20 -280,8 46,11 88,26 129,41 90,32 169,64 241,53 37,-5 77,-31 123,-58 32,-19 68,-40 108,-55z"/>
<path class="fil5" d="M439 1380c1,20 5,35 15,44 0,0 -9,-1 -15,-4 5,13 10,25 18,32 0,0 -11,-2 -16,-3 6,12 12,21 20,29 -20,0 -40,0 -60,0 9,-6 17,-17 24,-29 -6,1 -16,2 -16,2 8,-7 15,-16 22,-31 -6,4 -14,6 -15,5 10,-7 19,-21 23,-46z"/>
<path class="fil5" d="M196 1378c1,28 5,47 15,60 0,0 -9,-1 -15,-5 5,18 10,34 18,44 0,0 -11,-2 -16,-4 6,16 12,30 20,40 -20,0 -40,0 -60,0 9,-8 17,-23 24,-40 -6,2 -16,3 -16,3 8,-10 15,-22 22,-43 -6,5 -14,8 -15,7 10,-9 19,-29 23,-63z"/>
<path class="fil5" d="M1066 1377c2,21 6,39 16,48 0,0 -6,-4 -11,-7 1,14 6,40 13,48 0,0 -8,-4 -13,-8 1,19 9,29 17,36 -22,8 -39,10 -58,3 9,-6 17,-27 18,-39 -6,2 -16,9 -16,9 8,-7 21,-34 29,-50 -6,4 -14,6 -16,6 11,-7 18,-18 22,-46z"/>
<path class="fil5" d="M579 1320c3,27 10,47 25,59 0,0 -13,-1 -21,-5 8,18 16,34 27,44 0,0 -15,-2 -22,-4 9,16 19,29 30,40 -27,0 -54,0 -81,0 11,-8 22,-22 30,-39 -7,2 -22,3 -22,3 10,-9 19,-22 27,-42 -8,5 -18,7 -20,7 13,-9 23,-28 27,-62z"/>
<path class="fil5" d="M906 1408c4,21 8,39 19,48 0,0 -6,-4 -12,-7 2,14 8,40 17,48 0,0 -8,-4 -14,-8 2,19 11,29 19,36 -22,7 -38,9 -57,2 8,-6 15,-26 15,-38 -6,1 -15,8 -15,8 7,-7 19,-33 25,-49 -6,4 -13,6 -15,5 10,-7 16,-18 18,-45z"/>
<path class="fil8" d="M423 1475c-68,33 -129,68 -194,58 -104,-15 -148,-108 -302,-86l0 155 1214 0 0 -118 0 -43c-15,5 -29,13 -44,23 -42,28 -87,66 -168,58 -66,-6 -109,-30 -156,-52 -22,-10 -45,-20 -72,-28 -21,-6 -44,-11 -70,-14 -22,-2 -42,-2 -62,0 -54,6 -101,26 -145,47z"/>
<path class="fil9" d="M501 1403c4,35 13,61 33,76 0,0 -16,-1 -27,-6 11,23 21,43 35,57 0,0 -19,-3 -29,-5 12,21 24,38 39,51 -35,0 -70,0 -105,0 14,-11 28,-29 38,-51 -10,3 -28,4 -28,4 13,-12 25,-28 35,-55 -10,6 -23,10 -26,9 17,-12 30,-37 35,-80z"/>
<path class="fil9" d="M1007 1408c0,31 3,58 17,73 0,0 -8,-7 -16,-12 0,20 10,57 20,69 0,0 -11,-7 -18,-14 -1,28 9,43 20,56 -34,8 -59,8 -86,-4 14,-8 29,-37 31,-55 -9,1 -25,11 -25,11 13,-9 29,-44 43,-66 -9,5 -21,7 -24,6 17,-9 29,-24 38,-64z"/>
<path class="fil5" d="M943 1320c4,22 9,42 21,51 0,0 -6,-5 -13,-8 2,15 9,43 18,51 0,0 -9,-4 -15,-9 2,20 11,31 21,39 -23,8 -41,9 -62,2 9,-7 16,-28 16,-41 -6,2 -16,9 -16,9 8,-8 20,-36 27,-52 -6,4 -14,6 -16,6 11,-7 17,-19 20,-48z"/>
<path class="fil5" d="M1038 1331c1,14 4,27 11,33 0,0 -4,-3 -8,-5 1,9 4,28 9,33 0,0 -6,-3 -9,-6 1,13 6,20 12,25 -15,5 -27,7 -40,2 6,-4 12,-19 12,-27 -4,1 -11,6 -11,6 6,-5 15,-24 20,-34 -4,3 -10,4 -11,4 7,-5 12,-13 15,-32z"/>
<path class="fil5" d="M868 1352c2,17 5,33 14,41 0,0 -5,-4 -9,-7 1,11 5,34 12,40 0,0 -7,-4 -11,-8 1,16 8,24 14,31 -18,5 -32,6 -48,-1 7,-5 14,-21 14,-31 -5,1 -13,6 -13,6 7,-6 17,-27 23,-40 -5,3 -11,4 -13,4 9,-5 14,-14 17,-37z"/>
<path class="fil5" d="M769 1340c3,17 7,32 16,40 0,0 -5,-4 -10,-6 2,11 7,33 14,40 0,0 -7,-3 -11,-7 2,16 9,24 16,30 -18,6 -32,7 -48,2 7,-5 13,-22 12,-32 -5,1 -13,7 -13,7 6,-6 16,-28 21,-41 -5,3 -11,5 -13,5 9,-6 14,-15 15,-38z"/>
<path class="fil5" d="M671 1330c-2,21 -5,39 -15,48 0,0 5,-4 11,-7 -1,14 -5,40 -12,48 0,0 8,-4 13,-8 0,19 -8,29 -16,37 22,8 40,9 58,2 -9,-6 -18,-27 -18,-39 6,1 16,9 16,9 -8,-7 -22,-34 -30,-49 6,4 14,6 16,5 -11,-7 -18,-18 -23,-45z"/>
<path class="fil5" d="M348 1377c2,33 10,57 27,72 0,0 -15,-1 -25,-6 9,22 17,41 31,53 0,0 -18,-2 -27,-5 10,20 21,35 35,48 -33,0 -66,0 -99,0 14,-10 28,-27 38,-48 -9,2 -26,3 -26,3 12,-11 24,-26 35,-51 -9,6 -22,9 -25,9 17,-11 30,-35 36,-75z"/>
<path class="fil5" d="M310 1364c1,26 5,45 15,57 0,0 -9,-1 -14,-5 5,17 9,32 17,42 0,0 -10,-2 -16,-4 6,16 11,28 19,38 -19,0 -38,0 -57,0 8,-8 17,-22 23,-38 -5,2 -15,3 -15,3 7,-9 14,-21 21,-41 -6,5 -13,7 -15,7 10,-9 18,-27 22,-60z"/>
<path class="fil5" d="M242 1367c0,20 4,35 13,44 0,0 -8,-1 -13,-4 4,13 8,25 15,32 0,0 -9,-2 -14,-3 5,12 10,21 17,29 -17,0 -34,0 -51,0 7,-6 15,-17 21,-29 -5,1 -14,2 -14,2 7,-7 13,-16 19,-31 -5,4 -12,6 -13,5 9,-7 16,-21 20,-46z"/>
<path class="fil5" d="M156 1357c0,14 3,24 9,30 0,0 -5,0 -9,-2 3,9 6,17 10,22 0,0 -6,-1 -10,-2 4,8 7,15 12,20 -12,0 -23,0 -35,0 5,-4 10,-11 14,-20 -3,1 -9,1 -9,1 5,-5 9,-11 13,-21 -3,2 -8,4 -9,4 6,-4 11,-14 14,-31z"/>
<path class="fil5" d="M403 1358c0,14 3,24 9,30 0,0 -5,0 -9,-2 3,9 6,17 10,22 0,0 -6,-1 -10,-2 4,8 7,15 12,20 -12,0 -23,0 -35,0 5,-4 10,-11 14,-20 -3,1 -9,1 -9,1 5,-5 9,-11 13,-21 -3,2 -8,4 -9,4 6,-4 11,-14 14,-31z"/>
<path class="fil5" d="M491 1357c-1,14 1,24 7,30 0,0 -5,0 -9,-2 2,9 5,17 9,22 0,0 -6,-1 -9,-2 3,8 6,15 11,20 -12,0 -23,0 -35,0 5,-4 11,-11 15,-20 -3,1 -10,1 -10,1 5,-5 10,-11 14,-21 -4,2 -8,4 -9,4 6,-4 12,-14 16,-31z"/>
<path class="fil5" d="M18 1367c0,14 2,24 7,30 0,0 -4,0 -7,-2 2,9 5,17 8,22 0,0 -5,-1 -8,-2 3,8 6,15 10,20 -10,0 -19,0 -29,0 4,-4 8,-11 12,-20 -3,1 -8,1 -8,1 4,-5 7,-11 11,-21 -3,2 -6,4 -7,4 5,-4 9,-14 11,-31z"/>
<path class="fil5" d="M108 1391c0,14 2,24 7,30 0,0 -4,0 -7,-2 2,9 5,17 8,22 0,0 -5,-1 -8,-2 3,8 6,15 10,20 -10,0 -19,0 -29,0 4,-4 8,-11 12,-20 -3,1 -8,1 -8,1 4,-5 7,-11 11,-21 -3,2 -6,4 -7,4 5,-4 9,-14 11,-31z"/>
<path class="fil10" d="M877 1057c26,-15 51,-22 75,-3 15,-40 36,-46 59,-46 -27,-2 -53,-2 -63,31 -26,-15 -49,-2 -71,18z"/>
<path class="fil10" d="M1022 967c7,-3 14,-4 20,2 5,-10 11,-11 17,-10 -7,-2 -14,-2 -18,6 -6,-5 -13,-2 -20,2z"/>
<path class="fil11" d="M322 927c-48,-6 -92,31 -92,80 137,0 274,0 412,-1 8,-40 -37,-69 -70,-47 -14,-34 -52,-51 -87,-40 -16,-27 -46,-45 -80,-45 -36,0 -68,21 -83,51z"/>
<path class="fil11" d="M-23 1093c-4,-3 -9,-4 -14,-4 -14,0 -25,11 -25,25 0,4 1,7 2,10l29 0 18 0 6 0 22 0 53 0 25 0 74 0 19 0 32 0 15 0 33 0 12 0 37 0c1,-2 1,-4 1,-6 0,-14 -11,-25 -25,-25 -2,0 -4,0 -6,1 -4,-17 -19,-30 -37,-30 -11,0 -20,4 -27,12 -6,-4 -13,-6 -21,-6 -6,0 -12,2 -17,4 -11,-20 -32,-34 -56,-34 -23,0 -44,13 -55,32 -8,-6 -18,-9 -29,-9 -19,0 -36,11 -45,27 -2,-1 -4,-1 -6,-1 -6,0 -11,2 -15,5z"/>
<path class="fil12" d="M857 1099c5,0 9,2 12,6 3,-4 7,-6 12,-6l2 0c6,-9 16,-15 27,-15 14,0 25,8 30,20 1,0 3,-1 5,-1 4,0 8,1 11,4 3,-4 8,-7 14,-7 10,0 17,8 17,17 0,2 0,4 -1,6l-22 0 -10 0 -12 0 -16 0 -32 0 -14 0 -8 0 -2 0 -7 0 -20 0c-1,-2 -2,-5 -2,-7 0,-5 3,-10 6,-13 3,-2 6,-3 10,-3z"/>
<path class="fil9" d="M74 1349c-3,36 2,71 -16,87 0,0 12,-5 18,-13 -1,24 -8,60 -21,74 0,0 8,-10 16,-18 1,34 -14,46 -30,56 39,13 65,12 97,1 -15,-11 -38,-44 -40,-65 10,3 25,12 25,12 -14,-12 -27,-37 -40,-64 11,6 19,9 23,9 -19,-12 -25,-31 -33,-77z"/>
<path class="fil2" d="M617 1078l56 -25 -10 74 52 -74 42 69 4 -66c0,0 29,35 34,40 5,5 16,-34 16,-34 -38,-49 -72,-82 -93,-81 -23,1 -61,41 -103,97z"/>
<path class="fil2" d="M527 1211c-21,-30 -45,-50 -69,-51 -27,-1 -54,22 -79,57 -8,10 -15,22 -22,34l37 -16 16 -7 -3 24 -6 49 20 -29 32 -45 33 54 10 16 2 -35 2 -31c0,0 4,5 10,12 9,11 21,25 25,29 4,4 11,-16 14,-27 -7,-11 -13,-22 -20,-32z"/>
<path class="fil2" d="M373 1210c-25,-26 -53,-44 -81,-45 -36,-1 -73,26 -107,65l52 -17 -6 38 48 -42 46 30 1 -34c0,0 31,14 36,16 3,1 8,-5 11,-11z"/>
<path class="fil10" d="M55 1162c11,-10 22,-17 37,-11 2,-21 12,-27 23,-30 -14,2 -26,6 -27,23 -15,-4 -24,5 -33,17z"/>
<path class="fil2" d="M1140 1170l0 63 -38 31 6 -38 -44 14c24,-36 50,-63 76,-69z"/>
<path class="fil5" d="M1140 1378l0 122c-16,3 -30,2 -45,-4 10,-6 20,-28 21,-41 -6,1 -17,9 -17,9 9,-7 24,-35 33,-52 -7,4 -15,6 -17,5 12,-7 20,-19 25,-48 0,3 0,6 1,8z"/>
<path class="fil5" d="M-74 1497l0 -80c5,18 10,34 17,44 0,0 -11,-2 -16,-4 6,16 12,30 20,40l-21 0zm0 -80l0 -42c2,21 6,37 15,47 0,0 -9,-1 -15,-5z"/>
<path class="fil9" d="M811 1361c3,36 8,67 26,83 0,0 -9,-7 -19,-13 1,24 8,69 21,83 0,0 -14,-7 -22,-14 1,33 14,49 28,63 -39,13 -68,15 -100,4 15,-11 30,-46 32,-66 -10,3 -28,15 -28,15 14,-12 38,-58 51,-85 -11,6 -24,10 -27,9 19,-12 31,-31 39,-78z"/>
</g>
</g>
<path class="fil13" d="M0 0l1067 0 0 1600 -1067 0 0 -1600z"/>
<path class="fil11" d="M852 697l5 29 28 17 -26 14 -7 32 -21 -21 -33 3 13 -27 -13 -30 29 4 25 -22z"/>
<path class="fil11" d="M201 676l-2 13 -13 7 12 6 3 14 10 -9 15 1 -6 -12 6 -13 -13 2 -11 -10z"/>
<path class="fil11" d="M661 585l3 18 17 10 -16 9 -4 20 -13 -13 -20 2 8 -16 -8 -19 18 3 15 -13z"/>
<path class="fil11" d="M167 841l-5 29 -28 17 26 14 7 32 21 -21 33 3 -13 -27 13 -30 -29 4 -25 -22z"/>
<path class="fil11" d="M209 600l-3 -16 -16 -9 15 -8 4 -18 12 11 18 -2 -7 15 7 17 -16 -2 -14 12z"/>
<path class="fil11" d="M108 696l-3 -16 -16 -9 15 -8 4 -18 12 11 18 -2 -7 15 7 17 -16 -2 -14 12z"/>
<path class="fil11" d="M785 559l2 13 13 7 -12 6 -3 14 -10 -9 -15 1 6 -12 -6 -13 13 2 11 -10z"/>
<path class="fil14" d="M404 1515c70,0 127,8 127,19 0,10 -57,19 -127,19 -70,0 -127,-8 -127,-19 0,-10 57,-19 127,-19z"/>
</g>
</svg>
As Wayferer mentions, this is most likely a difference in rendering between the two Android versions (KitKat and Lollipop). There are a couple ways to address the issue: Give all your Android installations the same browser version by using the Crosswalk plugin. Crosswalk swaps out the WebView with the latest Chromium browser so that all Android v. > 4.0 devices will see the same thing. The downsides are that: You won't be able to support Android < 4.0 You won't be able to build on PhoneGap build yet (they do plan support, eventually) The download size for your app gets bigger, due to the embedded browser If you'd rather track down the difference and resolve it without Crosswalk, you can take a look at caniuse.com (http://caniuse.com/#feat=svg-css) to see if there's any obvious issue with the HTML / CSS classes you're using. You can also try remote debugging into the older device (instructions: https://developer.chrome.com/devtools/docs/remote-debugging), to see what the elements are that are causing the problem.
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?