3

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

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

我:target直接在 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,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/

4

2 回答 2

3

这是一个已知问题，特定于将其用作背景，并且由于安全问题显然不会修复（Opera 也不会显示它）。如果您直接查看 SVG，它会按预期工作。

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

采用 CSS Image 值的 CSS 属性将不支持 SVG 堆栈。这包括但不限于背景图像、遮罩图像、边框图像。

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

有关详细信息，请参阅以下讨论：

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

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

您将像处理老式 sprite 地图一样处理 SVG。

于 2013-04-16T17:02:06.997 回答
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。

于 2014-05-20T17:32:04.937 回答