使用CSS的SVG spritesheet定位 [英] SVG spritesheet targeting with CSS

问题描述

我一直在尝试通过CSS来处理用作背景图片的SVG元素的解决方案：

I've been trying to find a solution for handling SVG elements used as background images via CSS:

.icon.arrow-down
{
    background-image: url( 'images/spritesheet.svg#arrow-down' );
}

我使用：target 直接在SVG文件中，以便定位组合的SVG spritesheet中的特定图层（或组）。

I'm using :target directly in the SVG file in order to target a particular layer (or "group") within the combined 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生成正确的图像。

This works fine for Firefox and IE9+, but in Chrome it seems to be ignoring the #profile part. However, going to the SVG sheet directly in the browser, with the target id, yields the correct image.

这是Chrome处理方式的一个错误：target 在背景图片中？

Is this a bug in the way Chrome is handling :target in background images?

我想避免将一切分离成自己的文件，

I'm trying to avoid having to separate everything into their own files, so only one resource is downloaded, but I don't know that it is possible yet.

请注意，这些图标未显示在Chrome中，而是在其他浏览器中显示： http://jsfiddle.net/sYL5F/1/

Notice how the icons are not shown in Chrome, but are in other browsers: http://jsfiddle.net/sYL5F/1/

推荐答案

这是一个已知的问题，具体到使用它作为背景，显然不会被修复，因为安全问题（Opera也不显示它）。如果您直接查看SVG，它的工作方式如预期。

It's a known issue and is specific to using it as a background and apparently won't be fixed because of security concerns (Opera also doesn't display it). If you view the SVG directly, it works as you would expect.

https://code.google.com/p/chromium/issues/detail?id=128055#c6

使用CSS Image
值的CSS属性不支持SVG堆栈。这包括但不限于background-image，
mask-image，border-image。

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.

这是SVG和CSS WG的分辨率在资源
（如SVG渐变，遮罩，clipPath）和CSS解析
时的图像值之间不同。这是保护用户
隐私和安全的安全要求。

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:

http://lists.w3.org/Archives /Public/www-style/2012Oct/0406.html

http://lists.w3.org/Archives/Public/www-style/2012Oct/0765.html

您只需按照旧式sprite贴图的方式处理您的SVG。

You're just going to handle your SVG the same way you would an old fashioned sprite map.

这篇关于使用CSS的SVG spritesheet定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！