【发布时间】：2014-07-17 14:54:23
【问题描述】：
总结： 一个 SVG 精灵包含五个图标 <symbol> 块，其中一个通过 ID 引用其自己的渐变定义。它不再能够找到这个渐变并正确渲染。
JSFIDDLE： http://jsfiddle.net/Qtq24/1/
我正在将一些图形转换为 SVG，并且由于它们是图标（在这种情况下用于社交网络配置文件），因此我想将它们保存在精灵中（就像我之前使用 PNG 一样）。
我关注了this guide to SVG sprites on CSS-tricks.com（以及this follow-up which advises using <symbol> instead of <g>）。
我现在有一个 SVG sprite 文件，social-sprite.svg，您可以在here查看完整文件。
这是一个完整的<svg> 块，包含五个不同的<symbol> 块，每个块都有一个id 和一个viewBox 属性。在每种情况下，我通过在 Adobe Illustrator 中准备官方图标并保留已处理代码的相关部分来获得每个符号的 SVG 代码。
.svg 文件在<body> 标签打开后立即通过 PHP 包含（这就是为什么其中的主要<svg> 容器标有style="display: none;"），因此对每个符号的引用从HTML。
四个图标完美运行，我唯一遇到的问题是 YouTube 图标，因为它使用内部定义的渐变。这是 SVG 代码的 YouTube 部分：
<symbol id="youtube" viewBox="0 0 400 281.641">
<path id="Triangle" fill="#FFFFFF" d="M159.845,191.73l106.152-54.999L159.845,81.348V191.73z"/>
<path id="The_Sharpness" opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" fill="#420000" d="M159.845,81.348l93.091,62.162
l13.061-6.778L159.845,81.348z"/>
<g id="Lozenge">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.4204" y1="2.6162" x2="200.4204" y2="278.9292">
<stop offset="0" style="stop-color:#E52D27"/>
<stop offset="1" style="stop-color:#BF171D"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M392.928,62.226c0,0-3.839-27.073-15.617-38.995C362.371,7.583,345.626,7.506,337.947,6.59
c-54.975-3.974-137.441-3.974-137.441-3.974h-0.171c0,0-82.464,0-137.44,3.974c-7.68,0.916-24.419,0.993-39.364,16.641
C11.753,35.153,7.92,62.226,7.92,62.226s-3.929,31.792-3.929,63.583v29.805c0,31.791,3.929,63.582,3.929,63.582
s3.833,27.073,15.611,38.995c14.945,15.646,34.575,15.152,43.318,16.792c31.43,3.015,133.571,3.946,133.571,3.946
s82.552-0.124,137.526-4.099c7.679-0.915,24.424-0.993,39.363-16.64c11.778-11.922,15.617-38.995,15.617-38.995
s3.923-31.791,3.923-63.582v-29.805C396.851,94.017,392.928,62.226,392.928,62.226z M159.863,191.73l-0.018-110.383
l106.152,55.384L159.863,191.73z"/>
</g>
</g>
</symbol>
这在 HTML 中被调用：
<svg width="30" height="21">
<use xlink:href="#youtube" src="fallback.png" width="30" height="21" />
</svg>
打开的两条路径工作正常，问题是在这个新的组合精灵 SVG 文件中，每个图标分隔为 <symbol>，“菱形” <path> 无法找到#SVGID_1_ 对<linearGradient> 的引用。
在 Firefox 中，这会导致菱形显示为白色（我认为，也许它根本没有显示 - 并没有真正研究它）：
虽然 Chrome 将其呈现为黑色：
显然两者都不可接受。目前我唯一能做的就是删除路径上的fill="url(#SVGID_1_)"，然后用适合 YouTube 徽标的纯红色填充。不过，这不是一个合适的解决方案，即使不考虑以这种方式对 YouTube 徽标进行粗制滥造的事实，他们的品牌准则也不接受这一事实。
我尝试过的事情（但没有成功）：
- 移除包围渐变和路径的两个
<g>包装器，所以整个符号只是<path>-<path>-<linearGradient>-<path> - 将渐变定义包装在
<defs>容器中 - 将其包装在
<defs>中，并将其移动到 SVG 文件的顶部，即 YouTube 特定<symbol>的范围之外 - 更改 ID 名称（你永远不知道！）
- 用百分比而不是像素值重新定义渐变
那么我如何让一个已经在内部的<symbol> 引用一个也在内部的<linearGradient> 定义？
编辑：当整个<svg> 块被标记为style="display: none;" 时，渐变会失败。如果删除此样式，渐变将正确呈现。但提醒一下，添加了这种样式，这样当您导入 SVG 精灵时，它不会立即呈现在页面上，而只是允许您根据需要引用 id 定义的符号。
visibility: hidden 或opacity: 0 都允许正确渲染渐变，但显然它们没有提供适当的解决方案，因为它们仍然划定了 SVG 可见时会占用的空间。
在发现这一切之后，我很确定将完全可见的 <svg> 添加到 INSIDE 一个隐藏的容器 <div> 是没有问题的。但是，即使这样也会导致渐变不渲染。我离解决问题还差得远。
【问题讨论】：
-
您可以尝试将其包装在
标记中吗？ -
@MichaelMullany 那行不通。