响应SVG精灵
问题描述:
我正在为一个站点构建一个图标系统,并将它从png和font-icon精灵转移到SVG。响应SVG精灵
我需要它能够跨所有主流浏览器(IE9 +)工作,并且理想情况下希望使用片段标识符,或者作为第二个最佳选择,内联。我已经做了大量的研究,并且在那里没有太多的交易,从我读过的SVG sprite中得到的回应并不是特别敏感。
对于使用img标签的片段标识符,我必须将width/height设置为与viewbox相同的大小。增加img标签的尺寸最终会揭示下一个精灵的一些特征。我希望能够使用百分比值,以便精灵片段填充父容器。
我只是想确认这是不可能的,我找不到任何暗示我错误的想法。
答
这是非常可能的,并且相对容易实现。 SVG的矢量图形,因此,如果正确完成,将是您的网站上最响应的图形。
按预期方式设置您的SVG文件,但将每个精灵标记为带有其自己标识符的<g>
标记。
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="sprite" id="circle">
<ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />
</g>
<g class="sprite" id="square">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" />
</g>
<g class="sprite" id="triangle">
<path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />
</g>
</svg>
添加一些CSS说只有rargeted一个需要显示
<defs>
<style><![CDATA[
.sprite { display: none; }
.sprite:target { display: inline; }
]]></style>
</defs>
然后,每当使用img
标签或背景元素等
你需要你可以调用这些出可以在这里找到充分说明的写法:
这是假设每个图标都有相同的宽度/高度?我的图标的尺寸有所不同 –
我刚测试过它,并且当图标具有不同的尺寸比率时,我没有得到期望的结果,最终得到不需要的空白。我想我将不得不放弃现在使用SVG精灵的“梦想”:( –
我原以为有一堆图标与完全相同的尺寸比例更为不寻常,当然它会更普遍的是宽度/高度比例会有所不同,有些是正方形,最长方形,在这些矩形之间有不同的宽高比 –