Mixing
SVG rendering on Chrome with different colors
1
UPDATE: this seems to be a very unusual issue in a single .md file, where the logo renders normally if the prop is hard-coded, but not if it is passed through dynamically. In other places where the component that consumes the SVG is used it seems to work whether the prop is hard-coded or not. Unfortunately this remains unresolved for now - thanks for everyones help!
I have an SVG that is behaving strangely and renders in a flat red color, while it is supposed to have a green/white gradient. The problem seems to be unique to Chrome. Has anyone experienced this? I couldn't see any similar posts on Stack.
Below are examples of how the logo is supposed to look, and as it is currently rendering on Chrome.
Here is the code for the SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-70 -80 360 360">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="80.7216" y1="145.6755" x2="159.251" y2="145.6755">
<stop offset=".00526843" stop-color="#a2de68"/>
<stop offset="1" stop-color="#b0e37f"/>
</linearGradient>
<path d="M140.6 154c-2.9 3.2-9.2 8.6-18.1 9H121c-1.6 0-3.3-.1-4.9-.4-8.3-.9-14-5.9-16.7-8.9-1.5-1.7-14.5-20.8-18.6-26.3 3.8 6.1 16.2 25.2 17.9 27 1.6 1.7 7.7 8 17.3 9 1.5.2 3.2.4 5 .4h1.6c10.4-.5 17.2-7.3 18.9-9.1 1.7-1.8 14.2-21 17.9-27-4.5 6.7-17.3 24.7-18.8 26.3z" fill="url(#a)"/>
<g>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="9.6984" y1="123.4175" x2="230.3016" y2="123.4175">
<stop offset=".08207131" stop-color="#65c800"/>
<stop offset=".1119" stop-color="#61c700"/>
<stop offset=".1385" stop-color="#74ce1f"/>
<stop offset=".1933" stop-color="#99db5a"/>
<stop offset=".2481" stop-color="#b8e68c"/>
<stop offset=".3015" stop-color="#d1efb5"/>
<stop offset=".3534" stop-color="#e5f6d6"/>
<stop offset=".4033" stop-color="#f4fbec"/>
<stop offset=".4503" stop-color="#fcfefa"/>
<stop offset=".4914" stop-color="#fff"/>
<stop offset=".5526" stop-color="#fcfefb"/>
<stop offset=".6161" stop-color="#f5fbee"/>
<stop offset=".6807" stop-color="#e8f7da"/>
<stop offset=".7461" stop-color="#d6f0bc"/>
<stop offset=".8121" stop-color="#bee897"/>
<stop offset=".8786" stop-color="#a2de69"/>
<stop offset=".9442" stop-color="#81d233"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M202.3 156c15.8 2.1 26.2-2.6 27.7-9.7s-3.3-26.3-20.6-44.4-23.4-19.2-27-17.5c-3.6 1.8-10.6 9-13.1 12.1-2.5 3.1-33.1 48.7-36.6 51.3-3.5 2.6-7.3 5.8-12.7 5.5-5.4.3-9.3-2.9-12.7-5.5-3.5-2.6-34.1-48.2-36.6-51.3-2.5-3.1-9.5-10.3-13.1-12.1-3.6-1.8-9.7-.7-27 17.5S8.5 139.1 10 146.3c1.5 7.1 12 11.8 27.7 9.7 15.8-2.1 29.3-14.6 42-30l1.1 1.5c3.5 5.7 16.2 24.1 17.9 26 1.6 1.7 7.8 8.2 17.4 9.2 1.9.3 4.1.4 6.6.3 10.4-.5 17.1-7.5 18.8-9.3 1.7-1.8 14.4-20.3 17.9-26l1.3-1.6c10.4 14.2 25.9 27.8 41.6 29.9zm-19.1-57.5c4.9-2.6 12.3-5 17.8 2.5 5.8 8 17 27.8 9.9 43.5-2.6 5.8-11.7 6.1-13.4 6-1.8-.2-9.8-.8-21.5-10.1-9.6-7.5-14.7-15.1-14.7-15.1 6.4-9 16.2-23.8 21.9-26.8zM64 140.2c-11.8 9.2-19.8 9.9-21.5 10.1-1.8.2-10.8-.2-13.4-6-7-15.7 4.1-35.5 9.9-43.5 5.5-7.5 12.8-5.1 17.8-2.5 5.7 3.1 15.5 17.8 22 26.8-.1-.1-5.2 7.5-14.8 15.1z" fill="url(#b)"/>
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="1" y1="119" x2="239" y2="119">
<stop offset="0" stop-color="#ccedad"/>
<stop offset=".4861" stop-color="#61c700"/>
<stop offset=".607" stop-color="#62c702"/>
<stop offset=".6505" stop-color="#66c909"/>
<stop offset=".6816" stop-color="#6ecb14"/>
<stop offset=".7067" stop-color="#78cf25"/>
<stop offset=".7282" stop-color="#86d43b"/>
<stop offset=".7472" stop-color="#97da57"/>
<stop offset=".7644" stop-color="#abe177"/>
<stop offset=".7797" stop-color="#c2e99b"/>
<stop offset=".783" stop-color="#c7eba4"/>
<stop offset=".7933" stop-color="#caecaa"/>
<stop offset=".826" stop-color="#d2efb5"/>
<stop offset=".8721" stop-color="#d6f1bc"/>
<stop offset="1" stop-color="#d7f1be"/>
</linearGradient>
<path d="M219.6 102.5c-21.1-22.9-31.3-28.9-42-27-10.7 1.8-19.7 17-28.6 29.8 0 0-.2-.3-.5-.9-.7-1.1-2-3.4-4.2-7.1-3.4-5.7-13.4-23.2-24.7-22.5-.1 0-.2 0-.4.1-10.9 1-20.2 16.8-23.5 22.2-2.3 3.8-3.6 6.1-4.3 7.2-.3.5-.5.8-.5.8C82 92.3 73 77.1 62.3 75.3c-10.7-1.8-20.9 4.1-42 27C.1 126.3-.5 146 2.1 151.5c2.6 5.5 10.1 15.3 34.1 9.9 24-5.3 38-22 44.6-33.9l-1.1-1.5c-12.7 15.3-26.2 27.9-42 30-15.8 2.1-26.2-2.6-27.7-9.7s3.3-26.3 20.6-44.4 23.4-19.2 27-17.5c3.6 1.8 10.6 9 13.1 12.1 2.5 3.1 33.2 48.6 36.6 51.3 3.4 2.7 7.3 5.8 12.7 5.5 5.4.3 9.4-2.7 12.7-5.5 3.4-2.7 34.1-48.2 36.6-51.3 2.5-3.1 9.5-10.3 13.1-12.1 3.6-1.8 9.7-.7 27 17.5s22.1 37.3 20.6 44.4c-1.5 7.1-12 11.8-27.7 9.7-15.8-2.1-31.2-15.7-41.8-29.9l-1.3 1.6c6.6 11.9 20.6 28.6 44.6 33.9 24 5.3 31.5-4.4 34.1-9.9 2.6-5.5 2-25.2-18.3-49.2zm-73.6 7.4l-.2.2c-.5.7-2.5 3.3-8.4 11.8-5.1 7.3-8.5 12.2-12.5 14.4-1.3.6-2.6 1-4.2 1.1-7 .3-10.8-5.2-18.2-15.7-5.7-8.2-7.7-10.9-8.3-11.8l-1.8-2.4c.2-.3.4-.6.7-.9 5.6-7.4 15.9-22 26.9-22 9.7 0 22.2 14.8 27 21.9.2.4.5.7.7 1l-1.7 2.4z" fill="url(#c)"/>
<path d="M120.1 109.9l-.2.2.2-.2z" fill="#61c700"/>
<linearGradient id="d" gradientUnits="userSpaceOnUse" x1="92.3928" y1="97.3451" x2="147.6824" y2="97.3451">
<stop offset=".02421875" stop-color="#61c700"/>
<stop offset=".08461425" stop-color="#7ad029"/>
<stop offset=".1682" stop-color="#99db5a"/>
<stop offset=".251" stop-color="#b2e484"/>
<stop offset=".3314" stop-color="#c6eba4"/>
<stop offset=".4087" stop-color="#d5f0ba"/>
<stop offset=".4816" stop-color="#ddf3c8"/>
<stop offset=".5453" stop-color="#e0f4cd"/>
<stop offset=".6116" stop-color="#d1efb5"/>
<stop offset=".7513" stop-color="#ace279"/>
<stop offset=".9514" stop-color="#70cc18"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M94 109.6s7.3-10.1 20-14.2c3.4-.8 7.1-1 9.8-.4 14 3.5 22.2 14.8 22.2 14.9l1.8-2.3c-4.2-6.5-17.6-22.9-27.8-22.9-11.4 0-22.1 15.7-27.5 22.8l1.8 2.4c-.3-.2-.3-.3-.3-.3z" fill="url(#d)"/>
</g>
</svg>css
google-chrome svg asked Jan 2 at 11:48
Jack WatsonJack Watson
656
|
show 3 more comments
1
UPDATE: this seems to be a very unusual issue in a single .md file, where the logo renders normally if the prop is hard-coded, but not if it is passed through dynamically. In other places where the component that consumes the SVG is used it seems to work whether the prop is hard-coded or not. Unfortunately this remains unresolved for now - thanks for everyones help!
I have an SVG that is behaving strangely and renders in a flat red color, while it is supposed to have a green/white gradient. The problem seems to be unique to Chrome. Has anyone experienced this? I couldn't see any similar posts on Stack.
Below are examples of how the logo is supposed to look, and as it is currently rendering on Chrome.
Here is the code for the SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-70 -80 360 360">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="80.7216" y1="145.6755" x2="159.251" y2="145.6755">
<stop offset=".00526843" stop-color="#a2de68"/>
<stop offset="1" stop-color="#b0e37f"/>
</linearGradient>
<path d="M140.6 154c-2.9 3.2-9.2 8.6-18.1 9H121c-1.6 0-3.3-.1-4.9-.4-8.3-.9-14-5.9-16.7-8.9-1.5-1.7-14.5-20.8-18.6-26.3 3.8 6.1 16.2 25.2 17.9 27 1.6 1.7 7.7 8 17.3 9 1.5.2 3.2.4 5 .4h1.6c10.4-.5 17.2-7.3 18.9-9.1 1.7-1.8 14.2-21 17.9-27-4.5 6.7-17.3 24.7-18.8 26.3z" fill="url(#a)"/>
<g>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="9.6984" y1="123.4175" x2="230.3016" y2="123.4175">
<stop offset=".08207131" stop-color="#65c800"/>
<stop offset=".1119" stop-color="#61c700"/>
<stop offset=".1385" stop-color="#74ce1f"/>
<stop offset=".1933" stop-color="#99db5a"/>
<stop offset=".2481" stop-color="#b8e68c"/>
<stop offset=".3015" stop-color="#d1efb5"/>
<stop offset=".3534" stop-color="#e5f6d6"/>
<stop offset=".4033" stop-color="#f4fbec"/>
<stop offset=".4503" stop-color="#fcfefa"/>
<stop offset=".4914" stop-color="#fff"/>
<stop offset=".5526" stop-color="#fcfefb"/>
<stop offset=".6161" stop-color="#f5fbee"/>
<stop offset=".6807" stop-color="#e8f7da"/>
<stop offset=".7461" stop-color="#d6f0bc"/>
<stop offset=".8121" stop-color="#bee897"/>
<stop offset=".8786" stop-color="#a2de69"/>
<stop offset=".9442" stop-color="#81d233"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M202.3 156c15.8 2.1 26.2-2.6 27.7-9.7s-3.3-26.3-20.6-44.4-23.4-19.2-27-17.5c-3.6 1.8-10.6 9-13.1 12.1-2.5 3.1-33.1 48.7-36.6 51.3-3.5 2.6-7.3 5.8-12.7 5.5-5.4.3-9.3-2.9-12.7-5.5-3.5-2.6-34.1-48.2-36.6-51.3-2.5-3.1-9.5-10.3-13.1-12.1-3.6-1.8-9.7-.7-27 17.5S8.5 139.1 10 146.3c1.5 7.1 12 11.8 27.7 9.7 15.8-2.1 29.3-14.6 42-30l1.1 1.5c3.5 5.7 16.2 24.1 17.9 26 1.6 1.7 7.8 8.2 17.4 9.2 1.9.3 4.1.4 6.6.3 10.4-.5 17.1-7.5 18.8-9.3 1.7-1.8 14.4-20.3 17.9-26l1.3-1.6c10.4 14.2 25.9 27.8 41.6 29.9zm-19.1-57.5c4.9-2.6 12.3-5 17.8 2.5 5.8 8 17 27.8 9.9 43.5-2.6 5.8-11.7 6.1-13.4 6-1.8-.2-9.8-.8-21.5-10.1-9.6-7.5-14.7-15.1-14.7-15.1 6.4-9 16.2-23.8 21.9-26.8zM64 140.2c-11.8 9.2-19.8 9.9-21.5 10.1-1.8.2-10.8-.2-13.4-6-7-15.7 4.1-35.5 9.9-43.5 5.5-7.5 12.8-5.1 17.8-2.5 5.7 3.1 15.5 17.8 22 26.8-.1-.1-5.2 7.5-14.8 15.1z" fill="url(#b)"/>
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="1" y1="119" x2="239" y2="119">
<stop offset="0" stop-color="#ccedad"/>
<stop offset=".4861" stop-color="#61c700"/>
<stop offset=".607" stop-color="#62c702"/>
<stop offset=".6505" stop-color="#66c909"/>
<stop offset=".6816" stop-color="#6ecb14"/>
<stop offset=".7067" stop-color="#78cf25"/>
<stop offset=".7282" stop-color="#86d43b"/>
<stop offset=".7472" stop-color="#97da57"/>
<stop offset=".7644" stop-color="#abe177"/>
<stop offset=".7797" stop-color="#c2e99b"/>
<stop offset=".783" stop-color="#c7eba4"/>
<stop offset=".7933" stop-color="#caecaa"/>
<stop offset=".826" stop-color="#d2efb5"/>
<stop offset=".8721" stop-color="#d6f1bc"/>
<stop offset="1" stop-color="#d7f1be"/>
</linearGradient>
<path d="M219.6 102.5c-21.1-22.9-31.3-28.9-42-27-10.7 1.8-19.7 17-28.6 29.8 0 0-.2-.3-.5-.9-.7-1.1-2-3.4-4.2-7.1-3.4-5.7-13.4-23.2-24.7-22.5-.1 0-.2 0-.4.1-10.9 1-20.2 16.8-23.5 22.2-2.3 3.8-3.6 6.1-4.3 7.2-.3.5-.5.8-.5.8C82 92.3 73 77.1 62.3 75.3c-10.7-1.8-20.9 4.1-42 27C.1 126.3-.5 146 2.1 151.5c2.6 5.5 10.1 15.3 34.1 9.9 24-5.3 38-22 44.6-33.9l-1.1-1.5c-12.7 15.3-26.2 27.9-42 30-15.8 2.1-26.2-2.6-27.7-9.7s3.3-26.3 20.6-44.4 23.4-19.2 27-17.5c3.6 1.8 10.6 9 13.1 12.1 2.5 3.1 33.2 48.6 36.6 51.3 3.4 2.7 7.3 5.8 12.7 5.5 5.4.3 9.4-2.7 12.7-5.5 3.4-2.7 34.1-48.2 36.6-51.3 2.5-3.1 9.5-10.3 13.1-12.1 3.6-1.8 9.7-.7 27 17.5s22.1 37.3 20.6 44.4c-1.5 7.1-12 11.8-27.7 9.7-15.8-2.1-31.2-15.7-41.8-29.9l-1.3 1.6c6.6 11.9 20.6 28.6 44.6 33.9 24 5.3 31.5-4.4 34.1-9.9 2.6-5.5 2-25.2-18.3-49.2zm-73.6 7.4l-.2.2c-.5.7-2.5 3.3-8.4 11.8-5.1 7.3-8.5 12.2-12.5 14.4-1.3.6-2.6 1-4.2 1.1-7 .3-10.8-5.2-18.2-15.7-5.7-8.2-7.7-10.9-8.3-11.8l-1.8-2.4c.2-.3.4-.6.7-.9 5.6-7.4 15.9-22 26.9-22 9.7 0 22.2 14.8 27 21.9.2.4.5.7.7 1l-1.7 2.4z" fill="url(#c)"/>
<path d="M120.1 109.9l-.2.2.2-.2z" fill="#61c700"/>
<linearGradient id="d" gradientUnits="userSpaceOnUse" x1="92.3928" y1="97.3451" x2="147.6824" y2="97.3451">
<stop offset=".02421875" stop-color="#61c700"/>
<stop offset=".08461425" stop-color="#7ad029"/>
<stop offset=".1682" stop-color="#99db5a"/>
<stop offset=".251" stop-color="#b2e484"/>
<stop offset=".3314" stop-color="#c6eba4"/>
<stop offset=".4087" stop-color="#d5f0ba"/>
<stop offset=".4816" stop-color="#ddf3c8"/>
<stop offset=".5453" stop-color="#e0f4cd"/>
<stop offset=".6116" stop-color="#d1efb5"/>
<stop offset=".7513" stop-color="#ace279"/>
<stop offset=".9514" stop-color="#70cc18"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M94 109.6s7.3-10.1 20-14.2c3.4-.8 7.1-1 9.8-.4 14 3.5 22.2 14.8 22.2 14.9l1.8-2.3c-4.2-6.5-17.6-22.9-27.8-22.9-11.4 0-22.1 15.7-27.5 22.8l1.8 2.4c-.3-.2-.3-.3-.3-.3z" fill="url(#d)"/>
</g>
</svg>css
google-chrome svg asked Jan 2 at 11:48
Jack WatsonJack Watson
656
Please post the code of the SVG. Otherwise, no answer is possible.
– ccprog
Jan 2 at 13:06
@ccprog Sorry - I've added it now.
– Jack Watson
Jan 2 at 13:35
1
For me, it looks as its supposed to in Chromium 71/Debian. Do you use that as a standalone file or inline in another document (that maybe has some other elements with id a/b/c/d)?
– ccprog
Jan 2 at 13:44
1
It looks fine for me in Chrome Version 71.0.3578.98 (Official Build) (64-bit)
– Ted
Jan 2 at 14:33
What version of chrome are you using?
– codebreach
Jan 2 at 14:39
|
show 3 more comments
1
1
1
UPDATE: this seems to be a very unusual issue in a single .md file, where the logo renders normally if the prop is hard-coded, but not if it is passed through dynamically. In other places where the component that consumes the SVG is used it seems to work whether the prop is hard-coded or not. Unfortunately this remains unresolved for now - thanks for everyones help!
I have an SVG that is behaving strangely and renders in a flat red color, while it is supposed to have a green/white gradient. The problem seems to be unique to Chrome. Has anyone experienced this? I couldn't see any similar posts on Stack.
Below are examples of how the logo is supposed to look, and as it is currently rendering on Chrome.
Here is the code for the SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-70 -80 360 360">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="80.7216" y1="145.6755" x2="159.251" y2="145.6755">
<stop offset=".00526843" stop-color="#a2de68"/>
<stop offset="1" stop-color="#b0e37f"/>
</linearGradient>
<path d="M140.6 154c-2.9 3.2-9.2 8.6-18.1 9H121c-1.6 0-3.3-.1-4.9-.4-8.3-.9-14-5.9-16.7-8.9-1.5-1.7-14.5-20.8-18.6-26.3 3.8 6.1 16.2 25.2 17.9 27 1.6 1.7 7.7 8 17.3 9 1.5.2 3.2.4 5 .4h1.6c10.4-.5 17.2-7.3 18.9-9.1 1.7-1.8 14.2-21 17.9-27-4.5 6.7-17.3 24.7-18.8 26.3z" fill="url(#a)"/>
<g>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="9.6984" y1="123.4175" x2="230.3016" y2="123.4175">
<stop offset=".08207131" stop-color="#65c800"/>
<stop offset=".1119" stop-color="#61c700"/>
<stop offset=".1385" stop-color="#74ce1f"/>
<stop offset=".1933" stop-color="#99db5a"/>
<stop offset=".2481" stop-color="#b8e68c"/>
<stop offset=".3015" stop-color="#d1efb5"/>
<stop offset=".3534" stop-color="#e5f6d6"/>
<stop offset=".4033" stop-color="#f4fbec"/>
<stop offset=".4503" stop-color="#fcfefa"/>
<stop offset=".4914" stop-color="#fff"/>
<stop offset=".5526" stop-color="#fcfefb"/>
<stop offset=".6161" stop-color="#f5fbee"/>
<stop offset=".6807" stop-color="#e8f7da"/>
<stop offset=".7461" stop-color="#d6f0bc"/>
<stop offset=".8121" stop-color="#bee897"/>
<stop offset=".8786" stop-color="#a2de69"/>
<stop offset=".9442" stop-color="#81d233"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M202.3 156c15.8 2.1 26.2-2.6 27.7-9.7s-3.3-26.3-20.6-44.4-23.4-19.2-27-17.5c-3.6 1.8-10.6 9-13.1 12.1-2.5 3.1-33.1 48.7-36.6 51.3-3.5 2.6-7.3 5.8-12.7 5.5-5.4.3-9.3-2.9-12.7-5.5-3.5-2.6-34.1-48.2-36.6-51.3-2.5-3.1-9.5-10.3-13.1-12.1-3.6-1.8-9.7-.7-27 17.5S8.5 139.1 10 146.3c1.5 7.1 12 11.8 27.7 9.7 15.8-2.1 29.3-14.6 42-30l1.1 1.5c3.5 5.7 16.2 24.1 17.9 26 1.6 1.7 7.8 8.2 17.4 9.2 1.9.3 4.1.4 6.6.3 10.4-.5 17.1-7.5 18.8-9.3 1.7-1.8 14.4-20.3 17.9-26l1.3-1.6c10.4 14.2 25.9 27.8 41.6 29.9zm-19.1-57.5c4.9-2.6 12.3-5 17.8 2.5 5.8 8 17 27.8 9.9 43.5-2.6 5.8-11.7 6.1-13.4 6-1.8-.2-9.8-.8-21.5-10.1-9.6-7.5-14.7-15.1-14.7-15.1 6.4-9 16.2-23.8 21.9-26.8zM64 140.2c-11.8 9.2-19.8 9.9-21.5 10.1-1.8.2-10.8-.2-13.4-6-7-15.7 4.1-35.5 9.9-43.5 5.5-7.5 12.8-5.1 17.8-2.5 5.7 3.1 15.5 17.8 22 26.8-.1-.1-5.2 7.5-14.8 15.1z" fill="url(#b)"/>
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="1" y1="119" x2="239" y2="119">
<stop offset="0" stop-color="#ccedad"/>
<stop offset=".4861" stop-color="#61c700"/>
<stop offset=".607" stop-color="#62c702"/>
<stop offset=".6505" stop-color="#66c909"/>
<stop offset=".6816" stop-color="#6ecb14"/>
<stop offset=".7067" stop-color="#78cf25"/>
<stop offset=".7282" stop-color="#86d43b"/>
<stop offset=".7472" stop-color="#97da57"/>
<stop offset=".7644" stop-color="#abe177"/>
<stop offset=".7797" stop-color="#c2e99b"/>
<stop offset=".783" stop-color="#c7eba4"/>
<stop offset=".7933" stop-color="#caecaa"/>
<stop offset=".826" stop-color="#d2efb5"/>
<stop offset=".8721" stop-color="#d6f1bc"/>
<stop offset="1" stop-color="#d7f1be"/>
</linearGradient>
<path d="M219.6 102.5c-21.1-22.9-31.3-28.9-42-27-10.7 1.8-19.7 17-28.6 29.8 0 0-.2-.3-.5-.9-.7-1.1-2-3.4-4.2-7.1-3.4-5.7-13.4-23.2-24.7-22.5-.1 0-.2 0-.4.1-10.9 1-20.2 16.8-23.5 22.2-2.3 3.8-3.6 6.1-4.3 7.2-.3.5-.5.8-.5.8C82 92.3 73 77.1 62.3 75.3c-10.7-1.8-20.9 4.1-42 27C.1 126.3-.5 146 2.1 151.5c2.6 5.5 10.1 15.3 34.1 9.9 24-5.3 38-22 44.6-33.9l-1.1-1.5c-12.7 15.3-26.2 27.9-42 30-15.8 2.1-26.2-2.6-27.7-9.7s3.3-26.3 20.6-44.4 23.4-19.2 27-17.5c3.6 1.8 10.6 9 13.1 12.1 2.5 3.1 33.2 48.6 36.6 51.3 3.4 2.7 7.3 5.8 12.7 5.5 5.4.3 9.4-2.7 12.7-5.5 3.4-2.7 34.1-48.2 36.6-51.3 2.5-3.1 9.5-10.3 13.1-12.1 3.6-1.8 9.7-.7 27 17.5s22.1 37.3 20.6 44.4c-1.5 7.1-12 11.8-27.7 9.7-15.8-2.1-31.2-15.7-41.8-29.9l-1.3 1.6c6.6 11.9 20.6 28.6 44.6 33.9 24 5.3 31.5-4.4 34.1-9.9 2.6-5.5 2-25.2-18.3-49.2zm-73.6 7.4l-.2.2c-.5.7-2.5 3.3-8.4 11.8-5.1 7.3-8.5 12.2-12.5 14.4-1.3.6-2.6 1-4.2 1.1-7 .3-10.8-5.2-18.2-15.7-5.7-8.2-7.7-10.9-8.3-11.8l-1.8-2.4c.2-.3.4-.6.7-.9 5.6-7.4 15.9-22 26.9-22 9.7 0 22.2 14.8 27 21.9.2.4.5.7.7 1l-1.7 2.4z" fill="url(#c)"/>
<path d="M120.1 109.9l-.2.2.2-.2z" fill="#61c700"/>
<linearGradient id="d" gradientUnits="userSpaceOnUse" x1="92.3928" y1="97.3451" x2="147.6824" y2="97.3451">
<stop offset=".02421875" stop-color="#61c700"/>
<stop offset=".08461425" stop-color="#7ad029"/>
<stop offset=".1682" stop-color="#99db5a"/>
<stop offset=".251" stop-color="#b2e484"/>
<stop offset=".3314" stop-color="#c6eba4"/>
<stop offset=".4087" stop-color="#d5f0ba"/>
<stop offset=".4816" stop-color="#ddf3c8"/>
<stop offset=".5453" stop-color="#e0f4cd"/>
<stop offset=".6116" stop-color="#d1efb5"/>
<stop offset=".7513" stop-color="#ace279"/>
<stop offset=".9514" stop-color="#70cc18"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M94 109.6s7.3-10.1 20-14.2c3.4-.8 7.1-1 9.8-.4 14 3.5 22.2 14.8 22.2 14.9l1.8-2.3c-4.2-6.5-17.6-22.9-27.8-22.9-11.4 0-22.1 15.7-27.5 22.8l1.8 2.4c-.3-.2-.3-.3-.3-.3z" fill="url(#d)"/>
</g>
</svg>css
google-chrome svg asked Jan 2 at 11:48
Jack WatsonJack Watson
656
UPDATE: this seems to be a very unusual issue in a single .md file, where the logo renders normally if the prop is hard-coded, but not if it is passed through dynamically. In other places where the component that consumes the SVG is used it seems to work whether the prop is hard-coded or not. Unfortunately this remains unresolved for now - thanks for everyones help!
I have an SVG that is behaving strangely and renders in a flat red color, while it is supposed to have a green/white gradient. The problem seems to be unique to Chrome. Has anyone experienced this? I couldn't see any similar posts on Stack.
Below are examples of how the logo is supposed to look, and as it is currently rendering on Chrome.
Here is the code for the SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-70 -80 360 360">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="80.7216" y1="145.6755" x2="159.251" y2="145.6755">
<stop offset=".00526843" stop-color="#a2de68"/>
<stop offset="1" stop-color="#b0e37f"/>
</linearGradient>
<path d="M140.6 154c-2.9 3.2-9.2 8.6-18.1 9H121c-1.6 0-3.3-.1-4.9-.4-8.3-.9-14-5.9-16.7-8.9-1.5-1.7-14.5-20.8-18.6-26.3 3.8 6.1 16.2 25.2 17.9 27 1.6 1.7 7.7 8 17.3 9 1.5.2 3.2.4 5 .4h1.6c10.4-.5 17.2-7.3 18.9-9.1 1.7-1.8 14.2-21 17.9-27-4.5 6.7-17.3 24.7-18.8 26.3z" fill="url(#a)"/>
<g>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="9.6984" y1="123.4175" x2="230.3016" y2="123.4175">
<stop offset=".08207131" stop-color="#65c800"/>
<stop offset=".1119" stop-color="#61c700"/>
<stop offset=".1385" stop-color="#74ce1f"/>
<stop offset=".1933" stop-color="#99db5a"/>
<stop offset=".2481" stop-color="#b8e68c"/>
<stop offset=".3015" stop-color="#d1efb5"/>
<stop offset=".3534" stop-color="#e5f6d6"/>
<stop offset=".4033" stop-color="#f4fbec"/>
<stop offset=".4503" stop-color="#fcfefa"/>
<stop offset=".4914" stop-color="#fff"/>
<stop offset=".5526" stop-color="#fcfefb"/>
<stop offset=".6161" stop-color="#f5fbee"/>
<stop offset=".6807" stop-color="#e8f7da"/>
<stop offset=".7461" stop-color="#d6f0bc"/>
<stop offset=".8121" stop-color="#bee897"/>
<stop offset=".8786" stop-color="#a2de69"/>
<stop offset=".9442" stop-color="#81d233"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M202.3 156c15.8 2.1 26.2-2.6 27.7-9.7s-3.3-26.3-20.6-44.4-23.4-19.2-27-17.5c-3.6 1.8-10.6 9-13.1 12.1-2.5 3.1-33.1 48.7-36.6 51.3-3.5 2.6-7.3 5.8-12.7 5.5-5.4.3-9.3-2.9-12.7-5.5-3.5-2.6-34.1-48.2-36.6-51.3-2.5-3.1-9.5-10.3-13.1-12.1-3.6-1.8-9.7-.7-27 17.5S8.5 139.1 10 146.3c1.5 7.1 12 11.8 27.7 9.7 15.8-2.1 29.3-14.6 42-30l1.1 1.5c3.5 5.7 16.2 24.1 17.9 26 1.6 1.7 7.8 8.2 17.4 9.2 1.9.3 4.1.4 6.6.3 10.4-.5 17.1-7.5 18.8-9.3 1.7-1.8 14.4-20.3 17.9-26l1.3-1.6c10.4 14.2 25.9 27.8 41.6 29.9zm-19.1-57.5c4.9-2.6 12.3-5 17.8 2.5 5.8 8 17 27.8 9.9 43.5-2.6 5.8-11.7 6.1-13.4 6-1.8-.2-9.8-.8-21.5-10.1-9.6-7.5-14.7-15.1-14.7-15.1 6.4-9 16.2-23.8 21.9-26.8zM64 140.2c-11.8 9.2-19.8 9.9-21.5 10.1-1.8.2-10.8-.2-13.4-6-7-15.7 4.1-35.5 9.9-43.5 5.5-7.5 12.8-5.1 17.8-2.5 5.7 3.1 15.5 17.8 22 26.8-.1-.1-5.2 7.5-14.8 15.1z" fill="url(#b)"/>
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="1" y1="119" x2="239" y2="119">
<stop offset="0" stop-color="#ccedad"/>
<stop offset=".4861" stop-color="#61c700"/>
<stop offset=".607" stop-color="#62c702"/>
<stop offset=".6505" stop-color="#66c909"/>
<stop offset=".6816" stop-color="#6ecb14"/>
<stop offset=".7067" stop-color="#78cf25"/>
<stop offset=".7282" stop-color="#86d43b"/>
<stop offset=".7472" stop-color="#97da57"/>
<stop offset=".7644" stop-color="#abe177"/>
<stop offset=".7797" stop-color="#c2e99b"/>
<stop offset=".783" stop-color="#c7eba4"/>
<stop offset=".7933" stop-color="#caecaa"/>
<stop offset=".826" stop-color="#d2efb5"/>
<stop offset=".8721" stop-color="#d6f1bc"/>
<stop offset="1" stop-color="#d7f1be"/>
</linearGradient>
<path d="M219.6 102.5c-21.1-22.9-31.3-28.9-42-27-10.7 1.8-19.7 17-28.6 29.8 0 0-.2-.3-.5-.9-.7-1.1-2-3.4-4.2-7.1-3.4-5.7-13.4-23.2-24.7-22.5-.1 0-.2 0-.4.1-10.9 1-20.2 16.8-23.5 22.2-2.3 3.8-3.6 6.1-4.3 7.2-.3.5-.5.8-.5.8C82 92.3 73 77.1 62.3 75.3c-10.7-1.8-20.9 4.1-42 27C.1 126.3-.5 146 2.1 151.5c2.6 5.5 10.1 15.3 34.1 9.9 24-5.3 38-22 44.6-33.9l-1.1-1.5c-12.7 15.3-26.2 27.9-42 30-15.8 2.1-26.2-2.6-27.7-9.7s3.3-26.3 20.6-44.4 23.4-19.2 27-17.5c3.6 1.8 10.6 9 13.1 12.1 2.5 3.1 33.2 48.6 36.6 51.3 3.4 2.7 7.3 5.8 12.7 5.5 5.4.3 9.4-2.7 12.7-5.5 3.4-2.7 34.1-48.2 36.6-51.3 2.5-3.1 9.5-10.3 13.1-12.1 3.6-1.8 9.7-.7 27 17.5s22.1 37.3 20.6 44.4c-1.5 7.1-12 11.8-27.7 9.7-15.8-2.1-31.2-15.7-41.8-29.9l-1.3 1.6c6.6 11.9 20.6 28.6 44.6 33.9 24 5.3 31.5-4.4 34.1-9.9 2.6-5.5 2-25.2-18.3-49.2zm-73.6 7.4l-.2.2c-.5.7-2.5 3.3-8.4 11.8-5.1 7.3-8.5 12.2-12.5 14.4-1.3.6-2.6 1-4.2 1.1-7 .3-10.8-5.2-18.2-15.7-5.7-8.2-7.7-10.9-8.3-11.8l-1.8-2.4c.2-.3.4-.6.7-.9 5.6-7.4 15.9-22 26.9-22 9.7 0 22.2 14.8 27 21.9.2.4.5.7.7 1l-1.7 2.4z" fill="url(#c)"/>
<path d="M120.1 109.9l-.2.2.2-.2z" fill="#61c700"/>
<linearGradient id="d" gradientUnits="userSpaceOnUse" x1="92.3928" y1="97.3451" x2="147.6824" y2="97.3451">
<stop offset=".02421875" stop-color="#61c700"/>
<stop offset=".08461425" stop-color="#7ad029"/>
<stop offset=".1682" stop-color="#99db5a"/>
<stop offset=".251" stop-color="#b2e484"/>
<stop offset=".3314" stop-color="#c6eba4"/>
<stop offset=".4087" stop-color="#d5f0ba"/>
<stop offset=".4816" stop-color="#ddf3c8"/>
<stop offset=".5453" stop-color="#e0f4cd"/>
<stop offset=".6116" stop-color="#d1efb5"/>
<stop offset=".7513" stop-color="#ace279"/>
<stop offset=".9514" stop-color="#70cc18"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M94 109.6s7.3-10.1 20-14.2c3.4-.8 7.1-1 9.8-.4 14 3.5 22.2 14.8 22.2 14.9l1.8-2.3c-4.2-6.5-17.6-22.9-27.8-22.9-11.4 0-22.1 15.7-27.5 22.8l1.8 2.4c-.3-.2-.3-.3-.3-.3z" fill="url(#d)"/>
</g>
</svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-70 -80 360 360">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="80.7216" y1="145.6755" x2="159.251" y2="145.6755">
<stop offset=".00526843" stop-color="#a2de68"/>
<stop offset="1" stop-color="#b0e37f"/>
</linearGradient>
<path d="M140.6 154c-2.9 3.2-9.2 8.6-18.1 9H121c-1.6 0-3.3-.1-4.9-.4-8.3-.9-14-5.9-16.7-8.9-1.5-1.7-14.5-20.8-18.6-26.3 3.8 6.1 16.2 25.2 17.9 27 1.6 1.7 7.7 8 17.3 9 1.5.2 3.2.4 5 .4h1.6c10.4-.5 17.2-7.3 18.9-9.1 1.7-1.8 14.2-21 17.9-27-4.5 6.7-17.3 24.7-18.8 26.3z" fill="url(#a)"/>
<g>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="9.6984" y1="123.4175" x2="230.3016" y2="123.4175">
<stop offset=".08207131" stop-color="#65c800"/>
<stop offset=".1119" stop-color="#61c700"/>
<stop offset=".1385" stop-color="#74ce1f"/>
<stop offset=".1933" stop-color="#99db5a"/>
<stop offset=".2481" stop-color="#b8e68c"/>
<stop offset=".3015" stop-color="#d1efb5"/>
<stop offset=".3534" stop-color="#e5f6d6"/>
<stop offset=".4033" stop-color="#f4fbec"/>
<stop offset=".4503" stop-color="#fcfefa"/>
<stop offset=".4914" stop-color="#fff"/>
<stop offset=".5526" stop-color="#fcfefb"/>
<stop offset=".6161" stop-color="#f5fbee"/>
<stop offset=".6807" stop-color="#e8f7da"/>
<stop offset=".7461" stop-color="#d6f0bc"/>
<stop offset=".8121" stop-color="#bee897"/>
<stop offset=".8786" stop-color="#a2de69"/>
<stop offset=".9442" stop-color="#81d233"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M202.3 156c15.8 2.1 26.2-2.6 27.7-9.7s-3.3-26.3-20.6-44.4-23.4-19.2-27-17.5c-3.6 1.8-10.6 9-13.1 12.1-2.5 3.1-33.1 48.7-36.6 51.3-3.5 2.6-7.3 5.8-12.7 5.5-5.4.3-9.3-2.9-12.7-5.5-3.5-2.6-34.1-48.2-36.6-51.3-2.5-3.1-9.5-10.3-13.1-12.1-3.6-1.8-9.7-.7-27 17.5S8.5 139.1 10 146.3c1.5 7.1 12 11.8 27.7 9.7 15.8-2.1 29.3-14.6 42-30l1.1 1.5c3.5 5.7 16.2 24.1 17.9 26 1.6 1.7 7.8 8.2 17.4 9.2 1.9.3 4.1.4 6.6.3 10.4-.5 17.1-7.5 18.8-9.3 1.7-1.8 14.4-20.3 17.9-26l1.3-1.6c10.4 14.2 25.9 27.8 41.6 29.9zm-19.1-57.5c4.9-2.6 12.3-5 17.8 2.5 5.8 8 17 27.8 9.9 43.5-2.6 5.8-11.7 6.1-13.4 6-1.8-.2-9.8-.8-21.5-10.1-9.6-7.5-14.7-15.1-14.7-15.1 6.4-9 16.2-23.8 21.9-26.8zM64 140.2c-11.8 9.2-19.8 9.9-21.5 10.1-1.8.2-10.8-.2-13.4-6-7-15.7 4.1-35.5 9.9-43.5 5.5-7.5 12.8-5.1 17.8-2.5 5.7 3.1 15.5 17.8 22 26.8-.1-.1-5.2 7.5-14.8 15.1z" fill="url(#b)"/>
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="1" y1="119" x2="239" y2="119">
<stop offset="0" stop-color="#ccedad"/>
<stop offset=".4861" stop-color="#61c700"/>
<stop offset=".607" stop-color="#62c702"/>
<stop offset=".6505" stop-color="#66c909"/>
<stop offset=".6816" stop-color="#6ecb14"/>
<stop offset=".7067" stop-color="#78cf25"/>
<stop offset=".7282" stop-color="#86d43b"/>
<stop offset=".7472" stop-color="#97da57"/>
<stop offset=".7644" stop-color="#abe177"/>
<stop offset=".7797" stop-color="#c2e99b"/>
<stop offset=".783" stop-color="#c7eba4"/>
<stop offset=".7933" stop-color="#caecaa"/>
<stop offset=".826" stop-color="#d2efb5"/>
<stop offset=".8721" stop-color="#d6f1bc"/>
<stop offset="1" stop-color="#d7f1be"/>
</linearGradient>
<path d="M219.6 102.5c-21.1-22.9-31.3-28.9-42-27-10.7 1.8-19.7 17-28.6 29.8 0 0-.2-.3-.5-.9-.7-1.1-2-3.4-4.2-7.1-3.4-5.7-13.4-23.2-24.7-22.5-.1 0-.2 0-.4.1-10.9 1-20.2 16.8-23.5 22.2-2.3 3.8-3.6 6.1-4.3 7.2-.3.5-.5.8-.5.8C82 92.3 73 77.1 62.3 75.3c-10.7-1.8-20.9 4.1-42 27C.1 126.3-.5 146 2.1 151.5c2.6 5.5 10.1 15.3 34.1 9.9 24-5.3 38-22 44.6-33.9l-1.1-1.5c-12.7 15.3-26.2 27.9-42 30-15.8 2.1-26.2-2.6-27.7-9.7s3.3-26.3 20.6-44.4 23.4-19.2 27-17.5c3.6 1.8 10.6 9 13.1 12.1 2.5 3.1 33.2 48.6 36.6 51.3 3.4 2.7 7.3 5.8 12.7 5.5 5.4.3 9.4-2.7 12.7-5.5 3.4-2.7 34.1-48.2 36.6-51.3 2.5-3.1 9.5-10.3 13.1-12.1 3.6-1.8 9.7-.7 27 17.5s22.1 37.3 20.6 44.4c-1.5 7.1-12 11.8-27.7 9.7-15.8-2.1-31.2-15.7-41.8-29.9l-1.3 1.6c6.6 11.9 20.6 28.6 44.6 33.9 24 5.3 31.5-4.4 34.1-9.9 2.6-5.5 2-25.2-18.3-49.2zm-73.6 7.4l-.2.2c-.5.7-2.5 3.3-8.4 11.8-5.1 7.3-8.5 12.2-12.5 14.4-1.3.6-2.6 1-4.2 1.1-7 .3-10.8-5.2-18.2-15.7-5.7-8.2-7.7-10.9-8.3-11.8l-1.8-2.4c.2-.3.4-.6.7-.9 5.6-7.4 15.9-22 26.9-22 9.7 0 22.2 14.8 27 21.9.2.4.5.7.7 1l-1.7 2.4z" fill="url(#c)"/>
<path d="M120.1 109.9l-.2.2.2-.2z" fill="#61c700"/>
<linearGradient id="d" gradientUnits="userSpaceOnUse" x1="92.3928" y1="97.3451" x2="147.6824" y2="97.3451">
<stop offset=".02421875" stop-color="#61c700"/>
<stop offset=".08461425" stop-color="#7ad029"/>
<stop offset=".1682" stop-color="#99db5a"/>
<stop offset=".251" stop-color="#b2e484"/>
<stop offset=".3314" stop-color="#c6eba4"/>
<stop offset=".4087" stop-color="#d5f0ba"/>
<stop offset=".4816" stop-color="#ddf3c8"/>
<stop offset=".5453" stop-color="#e0f4cd"/>
<stop offset=".6116" stop-color="#d1efb5"/>
<stop offset=".7513" stop-color="#ace279"/>
<stop offset=".9514" stop-color="#70cc18"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M94 109.6s7.3-10.1 20-14.2c3.4-.8 7.1-1 9.8-.4 14 3.5 22.2 14.8 22.2 14.9l1.8-2.3c-4.2-6.5-17.6-22.9-27.8-22.9-11.4 0-22.1 15.7-27.5 22.8l1.8 2.4c-.3-.2-.3-.3-.3-.3z" fill="url(#d)"/>
</g>
</svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-70 -80 360 360">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="80.7216" y1="145.6755" x2="159.251" y2="145.6755">
<stop offset=".00526843" stop-color="#a2de68"/>
<stop offset="1" stop-color="#b0e37f"/>
</linearGradient>
<path d="M140.6 154c-2.9 3.2-9.2 8.6-18.1 9H121c-1.6 0-3.3-.1-4.9-.4-8.3-.9-14-5.9-16.7-8.9-1.5-1.7-14.5-20.8-18.6-26.3 3.8 6.1 16.2 25.2 17.9 27 1.6 1.7 7.7 8 17.3 9 1.5.2 3.2.4 5 .4h1.6c10.4-.5 17.2-7.3 18.9-9.1 1.7-1.8 14.2-21 17.9-27-4.5 6.7-17.3 24.7-18.8 26.3z" fill="url(#a)"/>
<g>
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="9.6984" y1="123.4175" x2="230.3016" y2="123.4175">
<stop offset=".08207131" stop-color="#65c800"/>
<stop offset=".1119" stop-color="#61c700"/>
<stop offset=".1385" stop-color="#74ce1f"/>
<stop offset=".1933" stop-color="#99db5a"/>
<stop offset=".2481" stop-color="#b8e68c"/>
<stop offset=".3015" stop-color="#d1efb5"/>
<stop offset=".3534" stop-color="#e5f6d6"/>
<stop offset=".4033" stop-color="#f4fbec"/>
<stop offset=".4503" stop-color="#fcfefa"/>
<stop offset=".4914" stop-color="#fff"/>
<stop offset=".5526" stop-color="#fcfefb"/>
<stop offset=".6161" stop-color="#f5fbee"/>
<stop offset=".6807" stop-color="#e8f7da"/>
<stop offset=".7461" stop-color="#d6f0bc"/>
<stop offset=".8121" stop-color="#bee897"/>
<stop offset=".8786" stop-color="#a2de69"/>
<stop offset=".9442" stop-color="#81d233"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M202.3 156c15.8 2.1 26.2-2.6 27.7-9.7s-3.3-26.3-20.6-44.4-23.4-19.2-27-17.5c-3.6 1.8-10.6 9-13.1 12.1-2.5 3.1-33.1 48.7-36.6 51.3-3.5 2.6-7.3 5.8-12.7 5.5-5.4.3-9.3-2.9-12.7-5.5-3.5-2.6-34.1-48.2-36.6-51.3-2.5-3.1-9.5-10.3-13.1-12.1-3.6-1.8-9.7-.7-27 17.5S8.5 139.1 10 146.3c1.5 7.1 12 11.8 27.7 9.7 15.8-2.1 29.3-14.6 42-30l1.1 1.5c3.5 5.7 16.2 24.1 17.9 26 1.6 1.7 7.8 8.2 17.4 9.2 1.9.3 4.1.4 6.6.3 10.4-.5 17.1-7.5 18.8-9.3 1.7-1.8 14.4-20.3 17.9-26l1.3-1.6c10.4 14.2 25.9 27.8 41.6 29.9zm-19.1-57.5c4.9-2.6 12.3-5 17.8 2.5 5.8 8 17 27.8 9.9 43.5-2.6 5.8-11.7 6.1-13.4 6-1.8-.2-9.8-.8-21.5-10.1-9.6-7.5-14.7-15.1-14.7-15.1 6.4-9 16.2-23.8 21.9-26.8zM64 140.2c-11.8 9.2-19.8 9.9-21.5 10.1-1.8.2-10.8-.2-13.4-6-7-15.7 4.1-35.5 9.9-43.5 5.5-7.5 12.8-5.1 17.8-2.5 5.7 3.1 15.5 17.8 22 26.8-.1-.1-5.2 7.5-14.8 15.1z" fill="url(#b)"/>
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="1" y1="119" x2="239" y2="119">
<stop offset="0" stop-color="#ccedad"/>
<stop offset=".4861" stop-color="#61c700"/>
<stop offset=".607" stop-color="#62c702"/>
<stop offset=".6505" stop-color="#66c909"/>
<stop offset=".6816" stop-color="#6ecb14"/>
<stop offset=".7067" stop-color="#78cf25"/>
<stop offset=".7282" stop-color="#86d43b"/>
<stop offset=".7472" stop-color="#97da57"/>
<stop offset=".7644" stop-color="#abe177"/>
<stop offset=".7797" stop-color="#c2e99b"/>
<stop offset=".783" stop-color="#c7eba4"/>
<stop offset=".7933" stop-color="#caecaa"/>
<stop offset=".826" stop-color="#d2efb5"/>
<stop offset=".8721" stop-color="#d6f1bc"/>
<stop offset="1" stop-color="#d7f1be"/>
</linearGradient>
<path d="M219.6 102.5c-21.1-22.9-31.3-28.9-42-27-10.7 1.8-19.7 17-28.6 29.8 0 0-.2-.3-.5-.9-.7-1.1-2-3.4-4.2-7.1-3.4-5.7-13.4-23.2-24.7-22.5-.1 0-.2 0-.4.1-10.9 1-20.2 16.8-23.5 22.2-2.3 3.8-3.6 6.1-4.3 7.2-.3.5-.5.8-.5.8C82 92.3 73 77.1 62.3 75.3c-10.7-1.8-20.9 4.1-42 27C.1 126.3-.5 146 2.1 151.5c2.6 5.5 10.1 15.3 34.1 9.9 24-5.3 38-22 44.6-33.9l-1.1-1.5c-12.7 15.3-26.2 27.9-42 30-15.8 2.1-26.2-2.6-27.7-9.7s3.3-26.3 20.6-44.4 23.4-19.2 27-17.5c3.6 1.8 10.6 9 13.1 12.1 2.5 3.1 33.2 48.6 36.6 51.3 3.4 2.7 7.3 5.8 12.7 5.5 5.4.3 9.4-2.7 12.7-5.5 3.4-2.7 34.1-48.2 36.6-51.3 2.5-3.1 9.5-10.3 13.1-12.1 3.6-1.8 9.7-.7 27 17.5s22.1 37.3 20.6 44.4c-1.5 7.1-12 11.8-27.7 9.7-15.8-2.1-31.2-15.7-41.8-29.9l-1.3 1.6c6.6 11.9 20.6 28.6 44.6 33.9 24 5.3 31.5-4.4 34.1-9.9 2.6-5.5 2-25.2-18.3-49.2zm-73.6 7.4l-.2.2c-.5.7-2.5 3.3-8.4 11.8-5.1 7.3-8.5 12.2-12.5 14.4-1.3.6-2.6 1-4.2 1.1-7 .3-10.8-5.2-18.2-15.7-5.7-8.2-7.7-10.9-8.3-11.8l-1.8-2.4c.2-.3.4-.6.7-.9 5.6-7.4 15.9-22 26.9-22 9.7 0 22.2 14.8 27 21.9.2.4.5.7.7 1l-1.7 2.4z" fill="url(#c)"/>
<path d="M120.1 109.9l-.2.2.2-.2z" fill="#61c700"/>
<linearGradient id="d" gradientUnits="userSpaceOnUse" x1="92.3928" y1="97.3451" x2="147.6824" y2="97.3451">
<stop offset=".02421875" stop-color="#61c700"/>
<stop offset=".08461425" stop-color="#7ad029"/>
<stop offset=".1682" stop-color="#99db5a"/>
<stop offset=".251" stop-color="#b2e484"/>
<stop offset=".3314" stop-color="#c6eba4"/>
<stop offset=".4087" stop-color="#d5f0ba"/>
<stop offset=".4816" stop-color="#ddf3c8"/>
<stop offset=".5453" stop-color="#e0f4cd"/>
<stop offset=".6116" stop-color="#d1efb5"/>
<stop offset=".7513" stop-color="#ace279"/>
<stop offset=".9514" stop-color="#70cc18"/>
<stop offset="1" stop-color="#61c700"/>
</linearGradient>
<path d="M94 109.6s7.3-10.1 20-14.2c3.4-.8 7.1-1 9.8-.4 14 3.5 22.2 14.8 22.2 14.9l1.8-2.3c-4.2-6.5-17.6-22.9-27.8-22.9-11.4 0-22.1 15.7-27.5 22.8l1.8 2.4c-.3-.2-.3-.3-.3-.3z" fill="url(#d)"/>
</g>
</svg>css
google-chrome svg css
google-chrome svg asked Jan 2 at 11:48
Jack WatsonJack Watson
656
asked Jan 2 at 11:48
Jack WatsonJack Watson
656
edited Jan 3 at 10:34
Jack Watson
asked Jan 2 at 11:48
Jack WatsonJack Watson
656
asked Jan 2 at 11:48
Jack WatsonJack Watson
656
asked Jan 2 at 11:48
Jack WatsonJack Watson
656
656
Please post the code of the SVG. Otherwise, no answer is possible.
– ccprog
Jan 2 at 13:06
@ccprog Sorry - I've added it now.
– Jack Watson
Jan 2 at 13:35
1
For me, it looks as its supposed to in Chromium 71/Debian. Do you use that as a standalone file or inline in another document (that maybe has some other elements with id a/b/c/d)?
– ccprog
Jan 2 at 13:44
1
It looks fine for me in Chrome Version 71.0.3578.98 (Official Build) (64-bit)
– Ted
Jan 2 at 14:33
What version of chrome are you using?
– codebreach
Jan 2 at 14:39
|
show 3 more comments
Please post the code of the SVG. Otherwise, no answer is possible.
– ccprog
Jan 2 at 13:06
@ccprog Sorry - I've added it now.
– Jack Watson
Jan 2 at 13:35
1
For me, it looks as its supposed to in Chromium 71/Debian. Do you use that as a standalone file or inline in another document (that maybe has some other elements with id a/b/c/d)?
– ccprog
Jan 2 at 13:44
1
It looks fine for me in Chrome Version 71.0.3578.98 (Official Build) (64-bit)
– Ted
Jan 2 at 14:33
What version of chrome are you using?
– codebreach
Jan 2 at 14:39
Please post the code of the SVG. Otherwise, no answer is possible.
– ccprog
Jan 2 at 13:06
Please post the code of the SVG. Otherwise, no answer is possible.
– ccprog
Jan 2 at 13:06
@ccprog Sorry - I've added it now.
– Jack Watson
Jan 2 at 13:35
@ccprog Sorry - I've added it now.
– Jack Watson
Jan 2 at 13:35
1
1
For me, it looks as its supposed to in Chromium 71/Debian. Do you use that as a standalone file or inline in another document (that maybe has some other elements with id a/b/c/d)?
– ccprog
Jan 2 at 13:44
For me, it looks as its supposed to in Chromium 71/Debian. Do you use that as a standalone file or inline in another document (that maybe has some other elements with id a/b/c/d)?
– ccprog
Jan 2 at 13:44
1
1
It looks fine for me in Chrome Version 71.0.3578.98 (Official Build) (64-bit)
– Ted
Jan 2 at 14:33
It looks fine for me in Chrome Version 71.0.3578.98 (Official Build) (64-bit)
– Ted
Jan 2 at 14:33
What version of chrome are you using?
– codebreach
Jan 2 at 14:39
What version of chrome are you using?
– codebreach
Jan 2 at 14:39
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005807%2fsvg-rendering-on-chrome-with-different-colors%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005807%2fsvg-rendering-on-chrome-with-different-colors%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please post the code of the SVG. Otherwise, no answer is possible.
– ccprog
Jan 2 at 13:06
@ccprog Sorry - I've added it now.
– Jack Watson
Jan 2 at 13:35
1
For me, it looks as its supposed to in Chromium 71/Debian. Do you use that as a standalone file or inline in another document (that maybe has some other elements with id a/b/c/d)?
– ccprog
Jan 2 at 13:44
1
It looks fine for me in Chrome Version 71.0.3578.98 (Official Build) (64-bit)
– Ted
Jan 2 at 14:33
What version of chrome are you using?
– codebreach
Jan 2 at 14:39