我一直试图通过CSS找到处理用作背景图像的SVG元素的解决方案:
.icon.arrow-down
{
background-image: url( 'images/spritesheet.svg#arrow-down' );
}
我直接在SVG文件中使用:target
,以便在组合的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,12.5)">
<path fill="#F00" d="M 0,25 50,25 25,0 z" />
</g>
...
</svg>
这适用于Firefox和IE9 +,但在Chrome中似乎忽略了#profile
部分。但是,直接在浏览器中使用目标ID转到SVG表会产生正确的图像。
这是Chrome在背景图片中处理:target
的方式的错误吗?
我试图避免将所有内容分成自己的文件,因此只下载了一个资源,但我不知道它是否可能。
请注意图标未在Chrome中显示,但在其他浏览器中显示:http://jsfiddle.net/sYL5F/1/
答案 0 :(得分:3)
这是一个已知问题,并且特定于将其用作背景,并且由于安全问题显然不会被修复(Opera也不会显示它)。如果您直接查看SVG,它会按预期工作。
https://code.google.com/p/chromium/issues/detail?id=128055#c6
使用CSS Image的CSS属性不支持SVG堆栈 值。这包括但不限于背景图像, mask-image,border-image。
这是SVG和CSS WG在资源之间有所不同的解决方案 (如SVG渐变,蒙版,clipPath)和解析期间的图像值 CSS的时间。这是保护用户的安全要求 隐私和安全。
有关详细信息,请参阅以下讨论:
http://lists.w3.org/Archives/Public/www-style/2012Oct/0406.html
http://lists.w3.org/Archives/Public/www-style/2012Oct/0765.html
你只需像处理老式的精灵地图一样处理你的SVG。
答案 1 :(得分:0)
对于我的最新项目,我已经使用我正在研究的PHP MVC框架实现了我自己创建自定义SVG参数的方法。基本上,我创建了一个链接到图标的控制器:
/icon/NAME_OF_ICON.svg?color=F00
我的icon
控制器获取文件名并将GET参数注入SVG文件。
//define( ROOT, "path/to/webroot" );
//$filename = ...get filename from URL...;
$svg = simplexml_load_file( ROOT . "/assets/icons/{$filename}" );
if( isset( $_GET['color'] ) )
{
$svg->path->addAttribute( 'fill', '#' . $_GET['color'] );
}
header( "Content-type: image/svg+xml" );
echo $svg->asXML( );
我最终会添加代码来缓存查询过的自定义SVG。