响应SVG精灵

我正在为一个站点构建一个图标系统，并将它从png和font-icon精灵转移到SVG。响应SVG精灵

我需要它能够跨所有主流浏览器（IE9 +）工作，并且理想情况下希望使用片段标识符，或者作为第二个最佳选择，内联。我已经做了大量的研究，并且在那里没有太多的交易，从我读过的SVG sprite中得到的回应并不是特别敏感。

对于使用img标签的片段标识符，我必须将width/height设置为与viewbox相同的大小。增加img标签的尺寸最终会揭示下一个精灵的一些特征。我希望能够使用百分比值，以便精灵片段填充父容器。

我只是想确认这是不可能的，我找不到任何暗示我错误的想法。

2015-08-16 stack_fish

这是非常可能的，并且相对容易实现。 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标签或背景元素等

你需要你可以调用这些出可以在这里找到充分说明的写法：

How to Use SVG Image Sprites

来源

2015-08-16 21:31:00 Stewartside

这是假设每个图标都有相同的宽度/高度？我的图标的尺寸有所不同 –

我刚测试过它，并且当图标具有不同的尺寸比率时，我没有得到期望的结果，最终得到不需要的空白。我想我将不得不放弃现在使用SVG精灵的“梦想”:( –

我原以为有一堆图标与完全相同的尺寸比例更为不寻常，当然它会更普遍的是宽度/高度比例会有所不同，有些是正方形，最长方形，在这些矩形之间有不同的宽高比 –

响应SVG精灵

回答

相关问题