.icon.arrow-down { background-image: url( 'images/spritesheet.svg#arrow-down' ); }
我正在使用:直接在SVG文件中定位,以便在组合的SVG spritesheet中定位特定层(或“组”).
<?xml version="1.0" encoding="utf-8" ?> <svg class="icon" id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50"> <defs> <style> rect,line { shape-rendering: crispEdges; } svg .icon { display: none; } svg .icon:target { display: inline; } </style> </defs> <!-- Arrows --> <g class="icon" id="arrow-down" transform="translate(0,12.5)"> <path fill="#F00" d="M 0,0 50,0 25,25 z" /> </g> <g class="icon" id="arrow-up" transform="translate(0,25 50,25 25,0 z" /> </g> ... </svg>
这适用于Firefox和IE9,但在Chrome中似乎忽略了#profile部分.但是,直接在浏览器中使用目标ID转到SVG表会产生正确的图像.
这是Chrome处理方式中的错误:目标是背景图像吗?
我试图避免将所有内容分成他们自己的文件,因此只下载了一个资源,但我不知道它是否可能.
请注意图标在Chrome中是如何显示的,但在其他浏览器中是如此:http://jsfiddle.net/sYL5F/1/
解决方法
https://code.google.com/p/chromium/issues/detail?id=128055#c6
SVG stacks will not be supported for CSS properties taking CSS Image
values. This includes,but is not limited to,background-image,
mask-image,border-image.This is a resolution of the SVG and CSS WG to differ between resources
(like SVG gradients,masks,clipPath) and image values during parse
time of CSS. This is a security requirement to protect the users
privacy and safety.See following discussions for further information:
07001
07002
你只是像老式的精灵地图一样处理你的SVG.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。