问题
I have an SVG which represents the Google Play Store badge:
<?xml version="1.0" encoding="utf-8"?>
<svg id="master-artboard" viewBox="0 0 740.4884643554688 219.59970092773438" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
<defs><linearGradient id="a" x1="31.8" y1="183.29" x2="15.02" y2="166.51" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#00a0ff"/>
<stop offset=".01" stop-color="#00a1ff"/>
<stop offset=".26" stop-color="#00beff"/>
<stop offset=".51" stop-color="#00d2ff"/>
<stop offset=".76" stop-color="#00dfff"/>
<stop offset="1" stop-color="#00e3ff"/>
</linearGradient><linearGradient id="b" x1="43.83" y1="172" x2="19.64" y2="172" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffe000"/>
<stop offset=".41" stop-color="#ffbd00"/>
<stop offset=".78" stop-color="orange"/>
<stop offset="1" stop-color="#ff9c00"/>
</linearGradient><linearGradient id="c" x1="34.83" y1="169.7" x2="12.07" y2="146.95" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff3a44"/>
<stop offset="1" stop-color="#c31162"/>
</linearGradient><linearGradient id="d" x1="17.3" y1="191.82" x2="27.46" y2="181.66" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#32a071"/>
<stop offset=".07" stop-color="#2da771"/>
<stop offset=".48" stop-color="#15cf74"/>
<stop offset=".8" stop-color="#06e775"/>
<stop offset="1" stop-color="#00f076"/>
</linearGradient></defs><g transform="matrix(5.486451625823975, 0, 0, 5.486451625823975, -54.84663259983063, -54.84210205078125)"><title>
ka_get
</title><path fill="none" d="M0 0h155v60H0z"/><path d="M 15 10 H 140 A 5 5 0 0 1 145 15 V 45 A 5 5 0 0 1 140 50 H 15 A 5 5 0 0 1 10 45 V 15 A 5 5 0 0 1 15 10 Z"/><path d="M140 10.8a4.2 4.2 0 0 1 4.2 4.2v30a4.2 4.2 0 0 1-4.2 4.2H15a4.2 4.2 0 0 1-4.2-4.2V15a4.2 4.2 0 0 1 4.2-4.2h125m0-.8H15a5 5 0 0 0-5 5v30a5 5 0 0 0 5 5h125a5 5 0 0 0 5-5V15a5 5 0 0 0-5-5z" fill="#a6a6a6"/><path d="M78.14 31.75A4.25 4.25 0 1 0 82.41 36a4.19 4.19 0 0 0-4.27-4.25zm0 6.83a2.58 2.58 0 1 1 2.4-2.58 2.46 2.46 0 0 1-2.4 2.58zm-9.31-6.83A4.25 4.25 0 1 0 73.09 36a4.19 4.19 0 0 0-4.27-4.25zm0 6.83A2.58 2.58 0 1 1 71.22 36a2.46 2.46 0 0 1-2.4 2.58zm-11.09-5.52v1.8h4.32a3.77 3.77 0 0 1-1 2.27 4.42 4.42 0 0 1-3.33 1.32 4.8 4.8 0 0 1 0-9.6A4.6 4.6 0 0 1 61 30.14l1.27-1.27A6.29 6.29 0 0 0 57.74 27a6.61 6.61 0 1 0 0 13.21 6 6 0 0 0 4.61-1.85 6 6 0 0 0 1.56-4.22 5.87 5.87 0 0 0-.1-1.13zm45.31 1.4a4 4 0 0 0-3.64-2.71 4 4 0 0 0-4 4.25 4.16 4.16 0 0 0 4.22 4.25 4.23 4.23 0 0 0 3.54-1.88l-1.45-1a2.43 2.43 0 0 1-2.09 1.18 2.16 2.16 0 0 1-2.06-1.29l5.69-2.35zm-5.8 1.42a2.33 2.33 0 0 1 2.22-2.48 1.65 1.65 0 0 1 1.58.9zM92.63 40h1.87V27.5h-1.87zm-3.06-7.3h-.07a3 3 0 0 0-2.24-1 4.26 4.26 0 0 0 0 8.51 2.9 2.9 0 0 0 2.24-1h.06v.61c0 1.63-.87 2.5-2.27 2.5a2.35 2.35 0 0 1-2.14-1.51l-1.63.68A4.05 4.05 0 0 0 87.29 44c2.19 0 4-1.29 4-4.43V32h-1.72zm-2.14 5.88a2.59 2.59 0 0 1 0-5.16A2.4 2.4 0 0 1 89.7 36a2.38 2.38 0 0 1-2.28 2.58zm24.38-11.08h-4.47V40h1.87v-4.74h2.61a3.89 3.89 0 1 0 0-7.76zm0 6h-2.61v-4.26h2.65a2.14 2.14 0 1 1 0 4.29zm11.53-1.8a3.5 3.5 0 0 0-3.33 1.91l1.66.69a1.77 1.77 0 0 1 1.7-.92 1.8 1.8 0 0 1 2 1.61v.13a4.13 4.13 0 0 0-1.95-.48c-1.79 0-3.6 1-3.6 2.81a2.89 2.89 0 0 0 3.1 2.75 2.63 2.63 0 0 0 2.4-1.2h.06v1h1.8v-4.81c0-2.19-1.66-3.46-3.79-3.46zm-.23 6.85c-.61 0-1.46-.31-1.46-1.06 0-1 1.06-1.33 2-1.33a3.32 3.32 0 0 1 1.7.42 2.26 2.26 0 0 1-2.19 2zM133.74 32l-2.14 5.42h-.06L129.32 32h-2l3.33 7.58-1.9 4.21h1.95L135.82 32zm-16.81 8h1.87V27.5h-1.87z" fill="#fff"/><path d="M20.44 17.54a2 2 0 0 0-.46 1.4v22.12a2 2 0 0 0 .46 1.4l.07.07L32.9 30.15v-.29L20.51 17.47z" fill="url(#a)"/><path d="M37 34.28l-4.1-4.13v-.29l4.1-4.14.09.05L42 28.56c1.4.79 1.4 2.09 0 2.89l-4.89 2.78z" fill="url(#b)"/><path d="M37.12 34.22L32.9 30 20.44 42.46a1.63 1.63 0 0 0 2.08.06l14.61-8.3" fill="url(#c)"/><path d="M37.12 25.78l-14.61-8.3a1.63 1.63 0 0 0-2.08.06L32.9 30z" fill="url(#d)"/><path d="M37 34.13l-14.49 8.25a1.67 1.67 0 0 1-2 0l-.07.07.07.07a1.66 1.66 0 0 0 2 0l14.61-8.3z" style="isolation:isolate" opacity=".2"/><path d="M20.44 42.32a2 2 0 0 1-.46-1.4v.15a2 2 0 0 0 .46 1.4l.07-.07zM42 31.3l-5 2.83.09.09L42 31.44A1.75 1.75 0 0 0 43 30a1.86 1.86 0 0 1-1 1.3z" style="isolation:isolate" opacity=".12"/><path d="M22.51 17.62L42 28.7a1.86 1.86 0 0 1 1 1.3 1.75 1.75 0 0 0-1-1.44L22.51 17.48c-1.4-.79-2.54-.13-2.54 1.47v.15c.03-1.61 1.15-2.27 2.54-1.48z" style="isolation:isolate" fill="#fff" opacity=".25"/><path d="M53 23.13a1.74 1.74 0 0 1-1.12-.36 2 2 0 0 1-.65-1l.7-.29a1.1 1.1 0 0 0 1.1.95 1 1 0 0 0 .83-.35 1.43 1.43 0 0 0 .29-.94V17h.77v4.09a2 2 0 0 1-.54 1.51 1.88 1.88 0 0 1-1.38.53zM59.71 17.74H57v1.9h2.46v.72H57v1.9h2.73V23H56.2v-6h3.5zM63 23h-.77v-5.26h-1.72V17h4.12v.74H63zM65.27 23v-.8l3.19-4.46H65.4V17h4v.8l-3.19 4.46h3.23V23zM72.54 23h-.77v-5.26H70.1V17h4.12v.74h-1.68zM77.2 23v-6h2.17a1.76 1.76 0 0 1 1.22.46 1.51 1.51 0 0 1 .52 1.17 1.31 1.31 0 0 1-.22.75 1.39 1.39 0 0 1-.59.49 1.52 1.52 0 0 1 .73.52 1.36 1.36 0 0 1 .29.86 1.57 1.57 0 0 1-.54 1.22 1.85 1.85 0 0 1-1.28.49zm.8-3.43h1.4a.9.9 0 0 0 .7-.29.89.89 0 0 0 0-1.26.86.86 0 0 0-.67-.29H78zm0 2.69h1.55a.92.92 0 0 0 .72-.31 1 1 0 0 0 .28-.68 1 1 0 0 0-1-1H78zM85.85 17.74h-2.73v1.9h2.46v.72h-2.46v1.9h2.73V23h-3.5v-6h3.5zM87.06 23v-6h.77v6z" fill="#fff" stroke="#fff" stroke-miterlimit="10" stroke-width=".2"/></g></svg>It works perfectly fine in all browsers, Firefox, Chrome etc.
The problem occurs when I put that SVG in a sprite.
The outcome that I put together is the following:
sprite.svg:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g1" x1="31.8" y1="183.29" x2="15.02" y2="166.51" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse" xmlns="http://www.w3.org/2000/svg">
<stop offset="0" stop-color="#00a0ff" />
<stop offset=".01" stop-color="#00a1ff" />
<stop offset=".26" stop-color="#00beff" />
<stop offset=".51" stop-color="#00d2ff" />
<stop offset=".76" stop-color="#00dfff" />
<stop offset="1" stop-color="#00e3ff" />
</linearGradient>
<linearGradient id="g2" x1="43.83" y1="172" x2="19.64" y2="172" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffe000" />
<stop offset=".41" stop-color="#ffbd00" />
<stop offset=".78" stop-color="orange" />
<stop offset="1" stop-color="#ff9c00" />
</linearGradient>
<linearGradient id="g3" x1="34.83" y1="169.7" x2="12.07" y2="146.95" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff3a44" />
<stop offset="1" stop-color="#c31162" />
</linearGradient>
<linearGradient id="g4" x1="17.3" y1="191.82" x2="27.46" y2="181.66" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#32a071" />
<stop offset=".07" stop-color="#2da771" />
<stop offset=".48" stop-color="#15cf74" />
<stop offset=".8" stop-color="#06e775" />
<stop offset="1" stop-color="#00f076" />
</linearGradient>
</defs>
<symbol viewBox="0 0 740.4884643554688 219.59970092773438" preserveAspectRatio="xMinYMin meet" id="store_badge_android" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-54.847 -54.842) scale(5.48645)">
<title>ka_get</title>
<path fill="none" d="M0 0h155v60H0z" />
<path d="M15 10h125a5 5 0 0 1 5 5v30a5 5 0 0 1-5 5H15a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5z" />
<path d="M140 10.8a4.2 4.2 0 0 1 4.2 4.2v30a4.2 4.2 0 0 1-4.2 4.2H15a4.2 4.2 0 0 1-4.2-4.2V15a4.2 4.2 0 0 1 4.2-4.2h125m0-.8H15a5 5 0 0 0-5 5v30a5 5 0 0 0 5 5h125a5 5 0 0 0 5-5V15a5 5 0 0 0-5-5z" fill="#a6a6a6" />
<path d="M78.14 31.75A4.25 4.25 0 1 0 82.41 36a4.19 4.19 0 0 0-4.27-4.25zm0 6.83a2.58 2.58 0 1 1 2.4-2.58 2.46 2.46 0 0 1-2.4 2.58zm-9.31-6.83A4.25 4.25 0 1 0 73.09 36a4.19 4.19 0 0 0-4.27-4.25zm0 6.83A2.58 2.58 0 1 1 71.22 36a2.46 2.46 0 0 1-2.4 2.58zm-11.09-5.52v1.8h4.32a3.77 3.77 0 0 1-1 2.27 4.42 4.42 0 0 1-3.33 1.32 4.8 4.8 0 0 1 0-9.6A4.6 4.6 0 0 1 61 30.14l1.27-1.27A6.29 6.29 0 0 0 57.74 27a6.61 6.61 0 1 0 0 13.21 6 6 0 0 0 4.61-1.85 6 6 0 0 0 1.56-4.22 5.87 5.87 0 0 0-.1-1.13zm45.31 1.4a4 4 0 0 0-3.64-2.71 4 4 0 0 0-4 4.25 4.16 4.16 0 0 0 4.22 4.25 4.23 4.23 0 0 0 3.54-1.88l-1.45-1a2.43 2.43 0 0 1-2.09 1.18 2.16 2.16 0 0 1-2.06-1.29l5.69-2.35zm-5.8 1.42a2.33 2.33 0 0 1 2.22-2.48 1.65 1.65 0 0 1 1.58.9zM92.63 40h1.87V27.5h-1.87zm-3.06-7.3h-.07a3 3 0 0 0-2.24-1 4.26 4.26 0 0 0 0 8.51 2.9 2.9 0 0 0 2.24-1h.06v.61c0 1.63-.87 2.5-2.27 2.5a2.35 2.35 0 0 1-2.14-1.51l-1.63.68A4.05 4.05 0 0 0 87.29 44c2.19 0 4-1.29 4-4.43V32h-1.72zm-2.14 5.88a2.59 2.59 0 0 1 0-5.16A2.4 2.4 0 0 1 89.7 36a2.38 2.38 0 0 1-2.28 2.58zm24.38-11.08h-4.47V40h1.87v-4.74h2.61a3.89 3.89 0 1 0 0-7.76zm0 6h-2.61v-4.26h2.65a2.14 2.14 0 1 1 0 4.29zm11.53-1.8a3.5 3.5 0 0 0-3.33 1.91l1.66.69a1.77 1.77 0 0 1 1.7-.92 1.8 1.8 0 0 1 2 1.61v.13a4.13 4.13 0 0 0-1.95-.48c-1.79 0-3.6 1-3.6 2.81a2.89 2.89 0 0 0 3.1 2.75 2.63 2.63 0 0 0 2.4-1.2h.06v1h1.8v-4.81c0-2.19-1.66-3.46-3.79-3.46zm-.23 6.85c-.61 0-1.46-.31-1.46-1.06 0-1 1.06-1.33 2-1.33a3.32 3.32 0 0 1 1.7.42 2.26 2.26 0 0 1-2.19 2zM133.74 32l-2.14 5.42h-.06L129.32 32h-2l3.33 7.58-1.9 4.21h1.95L135.82 32zm-16.81 8h1.87V27.5h-1.87z"
fill="#fff" />
<path d="M20.44 17.54a2 2 0 0 0-.46 1.4v22.12a2 2 0 0 0 .46 1.4l.07.07L32.9 30.15v-.29L20.51 17.47z" fill="url(#g1)" />
<path d="M37 34.28l-4.1-4.13v-.29l4.1-4.14.09.05L42 28.56c1.4.79 1.4 2.09 0 2.89l-4.89 2.78z" fill="url(#g2)" />
<path d="M37.12 34.22L32.9 30 20.44 42.46a1.63 1.63 0 0 0 2.08.06l14.61-8.3" fill="url(#g3)" />
<path d="M37.12 25.78l-14.61-8.3a1.63 1.63 0 0 0-2.08.06L32.9 30z" fill="url(#g4)" />
<path d="M37 34.13l-14.49 8.25a1.67 1.67 0 0 1-2 0l-.07.07.07.07a1.66 1.66 0 0 0 2 0l14.61-8.3z" style="isolation:isolate" opacity=".2" />
<path d="M20.44 42.32a2 2 0 0 1-.46-1.4v.15a2 2 0 0 0 .46 1.4l.07-.07zM42 31.3l-5 2.83.09.09L42 31.44A1.75 1.75 0 0 0 43 30a1.86 1.86 0 0 1-1 1.3z" style="isolation:isolate" opacity=".12" />
<path d="M22.51 17.62L42 28.7a1.86 1.86 0 0 1 1 1.3 1.75 1.75 0 0 0-1-1.44L22.51 17.48c-1.4-.79-2.54-.13-2.54 1.47v.15c.03-1.61 1.15-2.27 2.54-1.48z" style="isolation:isolate" fill="#fff" opacity=".25" />
<path d="M53 23.13a1.74 1.74 0 0 1-1.12-.36 2 2 0 0 1-.65-1l.7-.29a1.1 1.1 0 0 0 1.1.95 1 1 0 0 0 .83-.35 1.43 1.43 0 0 0 .29-.94V17h.77v4.09a2 2 0 0 1-.54 1.51 1.88 1.88 0 0 1-1.38.53zm6.71-5.39H57v1.9h2.46v.72H57v1.9h2.73V23H56.2v-6h3.5zM63 23h-.77v-5.26h-1.72V17h4.12v.74H63zm2.27 0v-.8l3.19-4.46H65.4V17h4v.8l-3.19 4.46h3.23V23zm7.27 0h-.77v-5.26H70.1V17h4.12v.74h-1.68zm4.66 0v-6h2.17a1.76 1.76 0 0 1 1.22.46 1.51 1.51 0 0 1 .52 1.17 1.31 1.31 0 0 1-.22.75 1.39 1.39 0 0 1-.59.49 1.52 1.52 0 0 1 .73.52 1.36 1.36 0 0 1 .29.86 1.57 1.57 0 0 1-.54 1.22 1.85 1.85 0 0 1-1.28.49zm.8-3.43h1.4a.9.9 0 0 0 .7-.29.89.89 0 0 0 0-1.26.86.86 0 0 0-.67-.29H78zm0 2.69h1.55a.92.92 0 0 0 .72-.31 1 1 0 0 0 .28-.68 1 1 0 0 0-1-1H78zm7.85-4.52h-2.73v1.9h2.46v.72h-2.46v1.9h2.73V23h-3.5v-6h3.5zM87.06 23v-6h.77v6z"
fill="#fff" stroke="#fff" stroke-miterlimit="10" stroke-width=".2" />
</g>
</symbol>
</svg>index.html: (remember to run it in a webserver, opening it as a file won't work)
<html>
<body>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="sprite.svg#store_badge_android"></use>
</svg>
</body>
</html>If you open up your newly created index.html it works perfectly in FF. In Chrome it does not work at all. The gradient is completely missing.
Is Firefox broken here or is the webkit engine broken?
Am I doing something wrong?
Changing the source svg with the badge is an option for me here.
New intel: This only happens, if we have an external sprite file. If the sprite file is included inline in the same page as the sprite inclusion, it works in Chrome:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g1" x1="31.8" y1="183.29" x2="15.02" y2="166.51" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse" xmlns="http://www.w3.org/2000/svg">
<stop offset="0" stop-color="#00a0ff" />
<stop offset=".01" stop-color="#00a1ff" />
<stop offset=".26" stop-color="#00beff" />
<stop offset=".51" stop-color="#00d2ff" />
<stop offset=".76" stop-color="#00dfff" />
<stop offset="1" stop-color="#00e3ff" />
</linearGradient>
<linearGradient id="g2" x1="43.83" y1="172" x2="19.64" y2="172" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffe000" />
<stop offset=".41" stop-color="#ffbd00" />
<stop offset=".78" stop-color="orange" />
<stop offset="1" stop-color="#ff9c00" />
</linearGradient>
<linearGradient id="g3" x1="34.83" y1="169.7" x2="12.07" y2="146.95" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff3a44" />
<stop offset="1" stop-color="#c31162" />
</linearGradient>
<linearGradient id="g4" x1="17.3" y1="191.82" x2="27.46" y2="181.66" gradientTransform="matrix(1 0 0 -1 0 202)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#32a071" />
<stop offset=".07" stop-color="#2da771" />
<stop offset=".48" stop-color="#15cf74" />
<stop offset=".8" stop-color="#06e775" />
<stop offset="1" stop-color="#00f076" />
</linearGradient>
</defs>
<symbol viewBox="0 0 740.4884643554688 219.59970092773438" preserveAspectRatio="xMinYMin meet" id="store_badge_android" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-54.847 -54.842) scale(5.48645)">
<title>ka_get</title>
<path fill="none" d="M0 0h155v60H0z" />
<path d="M15 10h125a5 5 0 0 1 5 5v30a5 5 0 0 1-5 5H15a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5z" />
<path d="M140 10.8a4.2 4.2 0 0 1 4.2 4.2v30a4.2 4.2 0 0 1-4.2 4.2H15a4.2 4.2 0 0 1-4.2-4.2V15a4.2 4.2 0 0 1 4.2-4.2h125m0-.8H15a5 5 0 0 0-5 5v30a5 5 0 0 0 5 5h125a5 5 0 0 0 5-5V15a5 5 0 0 0-5-5z" fill="#a6a6a6" />
<path d="M78.14 31.75A4.25 4.25 0 1 0 82.41 36a4.19 4.19 0 0 0-4.27-4.25zm0 6.83a2.58 2.58 0 1 1 2.4-2.58 2.46 2.46 0 0 1-2.4 2.58zm-9.31-6.83A4.25 4.25 0 1 0 73.09 36a4.19 4.19 0 0 0-4.27-4.25zm0 6.83A2.58 2.58 0 1 1 71.22 36a2.46 2.46 0 0 1-2.4 2.58zm-11.09-5.52v1.8h4.32a3.77 3.77 0 0 1-1 2.27 4.42 4.42 0 0 1-3.33 1.32 4.8 4.8 0 0 1 0-9.6A4.6 4.6 0 0 1 61 30.14l1.27-1.27A6.29 6.29 0 0 0 57.74 27a6.61 6.61 0 1 0 0 13.21 6 6 0 0 0 4.61-1.85 6 6 0 0 0 1.56-4.22 5.87 5.87 0 0 0-.1-1.13zm45.31 1.4a4 4 0 0 0-3.64-2.71 4 4 0 0 0-4 4.25 4.16 4.16 0 0 0 4.22 4.25 4.23 4.23 0 0 0 3.54-1.88l-1.45-1a2.43 2.43 0 0 1-2.09 1.18 2.16 2.16 0 0 1-2.06-1.29l5.69-2.35zm-5.8 1.42a2.33 2.33 0 0 1 2.22-2.48 1.65 1.65 0 0 1 1.58.9zM92.63 40h1.87V27.5h-1.87zm-3.06-7.3h-.07a3 3 0 0 0-2.24-1 4.26 4.26 0 0 0 0 8.51 2.9 2.9 0 0 0 2.24-1h.06v.61c0 1.63-.87 2.5-2.27 2.5a2.35 2.35 0 0 1-2.14-1.51l-1.63.68A4.05 4.05 0 0 0 87.29 44c2.19 0 4-1.29 4-4.43V32h-1.72zm-2.14 5.88a2.59 2.59 0 0 1 0-5.16A2.4 2.4 0 0 1 89.7 36a2.38 2.38 0 0 1-2.28 2.58zm24.38-11.08h-4.47V40h1.87v-4.74h2.61a3.89 3.89 0 1 0 0-7.76zm0 6h-2.61v-4.26h2.65a2.14 2.14 0 1 1 0 4.29zm11.53-1.8a3.5 3.5 0 0 0-3.33 1.91l1.66.69a1.77 1.77 0 0 1 1.7-.92 1.8 1.8 0 0 1 2 1.61v.13a4.13 4.13 0 0 0-1.95-.48c-1.79 0-3.6 1-3.6 2.81a2.89 2.89 0 0 0 3.1 2.75 2.63 2.63 0 0 0 2.4-1.2h.06v1h1.8v-4.81c0-2.19-1.66-3.46-3.79-3.46zm-.23 6.85c-.61 0-1.46-.31-1.46-1.06 0-1 1.06-1.33 2-1.33a3.32 3.32 0 0 1 1.7.42 2.26 2.26 0 0 1-2.19 2zM133.74 32l-2.14 5.42h-.06L129.32 32h-2l3.33 7.58-1.9 4.21h1.95L135.82 32zm-16.81 8h1.87V27.5h-1.87z"
fill="#fff" />
<path d="M20.44 17.54a2 2 0 0 0-.46 1.4v22.12a2 2 0 0 0 .46 1.4l.07.07L32.9 30.15v-.29L20.51 17.47z" fill="url(#g1)" />
<path d="M37 34.28l-4.1-4.13v-.29l4.1-4.14.09.05L42 28.56c1.4.79 1.4 2.09 0 2.89l-4.89 2.78z" fill="url(#g2)" />
<path d="M37.12 34.22L32.9 30 20.44 42.46a1.63 1.63 0 0 0 2.08.06l14.61-8.3" fill="url(#g3)" />
<path d="M37.12 25.78l-14.61-8.3a1.63 1.63 0 0 0-2.08.06L32.9 30z" fill="url(#g4)" />
<path d="M37 34.13l-14.49 8.25a1.67 1.67 0 0 1-2 0l-.07.07.07.07a1.66 1.66 0 0 0 2 0l14.61-8.3z" style="isolation:isolate" opacity=".2" />
<path d="M20.44 42.32a2 2 0 0 1-.46-1.4v.15a2 2 0 0 0 .46 1.4l.07-.07zM42 31.3l-5 2.83.09.09L42 31.44A1.75 1.75 0 0 0 43 30a1.86 1.86 0 0 1-1 1.3z" style="isolation:isolate" opacity=".12" />
<path d="M22.51 17.62L42 28.7a1.86 1.86 0 0 1 1 1.3 1.75 1.75 0 0 0-1-1.44L22.51 17.48c-1.4-.79-2.54-.13-2.54 1.47v.15c.03-1.61 1.15-2.27 2.54-1.48z" style="isolation:isolate" fill="#fff" opacity=".25" />
<path d="M53 23.13a1.74 1.74 0 0 1-1.12-.36 2 2 0 0 1-.65-1l.7-.29a1.1 1.1 0 0 0 1.1.95 1 1 0 0 0 .83-.35 1.43 1.43 0 0 0 .29-.94V17h.77v4.09a2 2 0 0 1-.54 1.51 1.88 1.88 0 0 1-1.38.53zm6.71-5.39H57v1.9h2.46v.72H57v1.9h2.73V23H56.2v-6h3.5zM63 23h-.77v-5.26h-1.72V17h4.12v.74H63zm2.27 0v-.8l3.19-4.46H65.4V17h4v.8l-3.19 4.46h3.23V23zm7.27 0h-.77v-5.26H70.1V17h4.12v.74h-1.68zm4.66 0v-6h2.17a1.76 1.76 0 0 1 1.22.46 1.51 1.51 0 0 1 .52 1.17 1.31 1.31 0 0 1-.22.75 1.39 1.39 0 0 1-.59.49 1.52 1.52 0 0 1 .73.52 1.36 1.36 0 0 1 .29.86 1.57 1.57 0 0 1-.54 1.22 1.85 1.85 0 0 1-1.28.49zm.8-3.43h1.4a.9.9 0 0 0 .7-.29.89.89 0 0 0 0-1.26.86.86 0 0 0-.67-.29H78zm0 2.69h1.55a.92.92 0 0 0 .72-.31 1 1 0 0 0 .28-.68 1 1 0 0 0-1-1H78zm7.85-4.52h-2.73v1.9h2.46v.72h-2.46v1.9h2.73V23h-3.5v-6h3.5zM87.06 23v-6h.77v6z"
fill="#fff" stroke="#fff" stroke-miterlimit="10" stroke-width=".2" />
</g>
</symbol>
</svg>
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#store_badge_android"></use>
</svg>回答1:
There is a long standing bug report on this issue and, if you look into the details, it seems to be related to the way that SVG resources and elements are loaded by Chrome in the SVG DOM. Anyway, for now you need to have the element and the resources inside the same file, just as you figured it yourself.
The same bug affects filter, see SVG filter in external file not being applied
来源：https://stackoverflow.com/questions/45442604/gradient-in-defs-not-showing-up-in-svg-sprite-in-chrome-webkit-based-browsers