在Chrome(基于Webkit的浏览器)的SVG Sprite中未显示def的渐变 [英] Gradient in defs not showing up in SVG sprite in Chrome (webkit-based browsers)
本文介绍了在Chrome(基于Webkit的浏览器)的SVG Sprite中未显示def的渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表示Google Play商店徽章的SVG:
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>它在所有浏览器，Firefox，Chrome等中都可以正常运行.
It works perfectly fine in all browsers, Firefox, Chrome etc.
当我将该SVG放在精灵中时，就会发生问题.
The problem occurs when I put that SVG in a sprite.
我汇总的结果如下:
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:(请记住，要在网络服务器中运行它，将其作为文件打开是行不通的)
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>如果打开新创建的index.html，则它在FF中可完美运行.在Chrome浏览器中，它根本不起作用.渐变完全消失了.
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.
Firefox在这里坏了还是webkit引擎坏了?
Is Firefox broken here or is the webkit engine broken?
我做错什么了吗?
在这里用徽章更改源svg是我的选择.
Changing the source svg with the badge is an option for me here.
新的intel:仅当我们具有外部Sprite文件时，才会发生这种情况.如果子画面文件与子画面包含项包含在同一页面中，则它可以在Chrome浏览器中运行:
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>推荐答案
长期存在的错误报告，并且，如果您仔细研究，它似乎与Chrome在SVG DOM中加载SVG资源和元素的方式有关.无论如何，现在您需要将元素和资源包含在同一个文件中，就像您自己想像的那样.
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.
同一错误会影响 filter ，请参见未应用外部文件中的SVG过滤器
The same bug affects filter, see SVG filter in external file not being applied
这篇关于在Chrome(基于Webkit的浏览器)的SVG Sprite中未显示def的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
