使用CSS定位SVG spritesheet

我一直试图找到一种解决方案，通过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>

直线{形状渲染：CrispEdge；}
svg.icon{display:none；}
icon:target{display:inline；}
...

这在Firefox和IE9+上运行良好，但在Chrome中它似乎忽略了

#profile

部分。但是，直接在浏览器中使用目标id访问SVG工作表，可以生成正确的图像

这是Chrome在处理背景图像中的

：target

时遇到的一个错误吗

我试图避免将所有内容都分离到各自的文件中，因此只下载一个资源，但我不知道这是否可行

---

请注意，这些图标在Chrome浏览器中没有显示，但在其他浏览器中有显示：

这是一个已知问题，专门用于将其用作背景，显然不会修复，因为存在安全问题（Opera也不会显示它）。如果您直接查看SVG，它将按照您的预期工作

拍摄CSS图像的CSS属性不支持SVG堆栈 价值观这包括但不限于背景图像， 遮罩图像，边框图像

这是SVG和CSS WG在不同资源之间的区别 （如SVG渐变、遮罩、剪贴画）和解析期间的图像值 CSS时代。这是保护用户的安全要求 隐私和安全

有关更多信息，请参见以下讨论：

---

您只需要像处理老式的sprite地图一样处理SVG。

对于我的最新项目，我已经实现了自己的方法，使用我一直在使用的PHP MVC框架创建自定义SVG参数。基本上，我创建了一个用于链接图标的控制器：

/icon/NAME_OF_ICON.svg?color=F00

我的

图标

控制器获取文件名并将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。

除了重做所有图像和css文件之外，没有其他解决方法吗？对于静态图像服务来说有点重，不是吗？我建议添加一个简单的缓存算法来加快速度。事实上，这就是为什么我写这篇文章的原因，“我最终将添加代码来缓存查询的自定义SVG。”SVG SPRITESHEETS？似乎对我有用这是我给出的答案