摘要: 一个SVG精灵包含五个图标<symbol>
块,其中一个引用其自身的渐变定义ID。它无法再找到该渐变并正确渲染。
JSFIDDLE: http://jsfiddle.net/Qtq24/1/
我正在将一些图形切换到SVG格式,并且因为它们是图标(在这种情况下是社交网络配置文件),所以我想将它们保存在精灵中(就像之前使用PNG时一样)。
我遵循了CSS-tricks.com上有关SVG精灵的指南(以及建议使用<symbol>
而不是<g>
的后续内容)。
现在我有一个SVG精灵文件,名为social-sprite.svg,您可以在此处完整查看。
这是一个完整的<svg>
块,其中包含五个不同的<symbol>
块,每个块都有一个id
和一个viewBox
属性。在每种情况下,我通过在Adobe Illustrator中准备官方图标并保留已处理代码的相关部分来获取每个符号的SVG代码。
该.svg文件通过PHP包含,即在<body>
标签打开时(这就是为什么其中的主要<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>
无法找到对<linearGradient>
的#SVGID_1_引用。
在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-defined符号进行引用。
visibility: hidden
或opacity: 0
都可以使渐变正确呈现,但很明显它们并不提供适当的解决方案,因为它们仍然标记了SVG如果可见时将占据的空间。
在发现所有这些问题后,我很确定只需将完全可见的<svg>
添加到隐藏的容器<div>
内部即可。但是,即使这样也会导致渐变无法呈现。我离解决问题还有很远的路要走。