了解SVG查询字符串参数

Question

我创建了一个SVG文件,我打算用它作为CSS中的背景图像.我希望能够使用query-string参数更改SVG中的填充颜色,如下所示:

#rect     { background-image: url( 'rect.svg' ); }
#rect.red { background-image: url( 'rect.svg?color=red' ); }

据我所知,在SVG中使用脚本标签,我能够获取color参数并更新填充颜色.这是一个示例SVG:

<!DOCTYPE svg PUBLIC "-//W3C//DDTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" />

    <script>
    <![CDATA[
        var params = { };
        location.href.split( '?' )[1].split( '&' ).forEach(
            function( i )
            {
                params[ i.split( '=' )[0] ] = i.split( '=' )[1];
            }
        );

        if( params.color )
        {
            var rect = document.getElementsByTagName( "rect" )[0];
            rect.setAttribute( "fill", params.color );
        }
    ]]>
    </script>
</svg>

直接转到文件或使用对象标签似乎有效,但对于CSS背景图像或img标签,颜色参数将被忽略.

我不确定这里发生了什么,我希望有一个解释或替代解决方案,我正在努力完成(最好不要求助于服务器端处理).

这是一个显示不同渲染方法的jsFiddle:http://jsfiddle.net/ehb7S/

Answer 1

我最终创建了一个服务器端解决方案，允许我将颜色填充注入到 SVG 文件中。本质上，我将所有 SVG 请求重定向到一个 PHP 文件，该文件对它们执行以下操作：

$filename = $_SERVER['SCRIPT_FILENAME'];

$svg = simplexml_load_file( $filename );
if( isset( $_GET['color'] ) )
{
    $svg->path->addAttribute( 'fill', '#' . $_GET['color'] );
}

header( "Content-type: image/svg+xml" );
echo $svg->asXML( );

显然，还有更多的事情要做，比如处理缓存等，但这就是最重要的。可能还想检查该fill属性是否已经存在。