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精灵文件,social-sprite.svg,您可以在here中查看.
这是一个完整的< svg>包含五个不同的<符号>块,每个都有一个id和一个viewBox属性.在每种情况下,我通过在Adobe Illustrator中准备官方图标并保留处理代码的相关部分,获得每个符号的SVG代码.
< body>之后,.svg文件将通过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,62.226s-3.929,31.792-3.929,63.583v29.805c0,31.791,3.929,63.582,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,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.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>,“Lozenge”< path>无法找到< linearGradient>的#SVGID_1_引用.
在Firefox中,这会导致菱形显示为白色(我认为,也许它根本没有显示 – 没有真正看到它)：
而Chrome则呈现黑色：
显然这两者都不可接受.目前唯一可以做的就是在路径上移除fill =“url(#SVGID_1_)”,只需填写适合YouTube徽标的平面颜色红色.这不是一个正确的解决方案,尽管如此,即使这样的事实,以这种方式欺骗YouTube标志也不会被他们的品牌指导所接受.
我试过的东西(没有运气)：
>去除两个< g>围绕梯度和路径的包装器,因此整个符号只是< path> – < path> – < linearGradient> – < path>
将渐变定义包含在< defs>容器
>将其包装在< defs>并且还将其移动到SVG文件的顶部,即在YouTube特定的<符号>的范围之外.
>更改ID名称(你永远不会知道！)
>用百分比重新定义渐变,而不是像素值
那么如何获得已经内部的< symbol>以引用一个内部< linearGradient>定义？
编辑：结果当整个< svg>块被标记为style =“display：none;”.如果删除此样式,渐变呈现正确.但是作为一个提醒,添加了这个样式,以便当您导入SVG精灵时,它不会在页面上立即呈现,只允许您根据需要引用id定义的符号.
可见性：隐藏或不透明度：0都允许梯度呈现正确,显然它们不提供适当的解决方案,尽管它们仍然标注SVG会占用的空间(如果可见).
发现所有这些之后,我很确定这是完全可见的< svg>没有添加样式INSIDE一个容器< div>这是隐藏的.但是,即使这样也不会渲染渐变.我没有更接近解决这个问题.
解决方法
我一直处于困境,并处于这个“完美”的“答案”之上,但对于任何这种情况,仍然是可靠的.
所有您需要做的是将整个< svg> < div>中的代码容器必须显示,但永远不会影响布局,所以我刚刚通过超大的杀毒CSS做了这样的事情,如：
身高：0;宽度：0;位置：绝对能见度：隐藏;
这样做很棒.看到最后的小提琴：http://jsfiddle.net/Qtq24/5/
如果任何人有更好的解决方案,我很乐意听到它,因为这感觉像一个黑客的方式,但我猜不要比使用display：none更麻烦;无论如何.
