了解 SVG 查询字符串参数答案

【问题标题】：Understanding SVG query-string parameters了解 SVG 查询字符串参数
【发布时间】：2013-04-12 17:02:20
【问题描述】：

我创建了一个 SVG 文件，打算用作 CSS 中的背景图像。我希望能够使用查询字符串参数更改 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>

直接进入文件，或者使用object标签似乎可以，但是对于CSS背景图片或img标签，color参数被忽略了。

我不确定这里发生了什么，我希望对我正在尝试完成的事情有一个解释或替代解决方案（最好不诉诸服务器端处理）。

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

【问题讨论】：

当 SVG 用作 CSS 背景图像或图像标签时，javascript 被禁用。
啊，这就解释了为什么它不起作用。如果有任何其他聪明的解决方案可以通过 CSS 将参数传递给 SVG，我将保持打开状态，但看起来我可能不走运。
为什么不用svg之外的一些js呢？
@mihai，如果您能向我解释如何从 JavaScript 外部操作 CSS 背景 SVG，那将很有帮助。
是的，我一直在想办法……但这要么不可能，要么不重要:)

标签： javascript parameters svg query-string

【解决方案1】：

您可以使用隐藏的内联 SVG，对其进行更改并将其动态编码为您放入 background-image 属性的数据 URL。您的 HTML 可能如下所示：

<div id="backgroundContainer" style="display:none">
    <svg width="100px" height="100px" id="backgroundSvg" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="50" fill="green"/>
    </svg>
</div>

<div id="divWithBackground" onclick="changeBackground(event)">
    Click to change background SVG to random color
</div>

和你的 JavaScript 一样

changeBackground = function(event) {
  var backgroundSvg = document.getElementById("backgroundSvg");
  var backgroundContainer = document.getElementById("backgroundContainer");
  backgroundSvg.getElementsByTagName("circle")[0].setAttribute(
    "fill",
    ["red","green","blue","black"][Math.floor(4*Math.random())]
  );
  event.target.setAttribute(
    "style",
    "background-image:url(data:image/svg+xml,"
    + encodeURI(backgroundContainer.innerHTML)
    + ")"
  );
}

请参阅proof of concept on jsFiddle。

【讨论】：

【解决方案2】：

我最终创建了一个服务器端解决方案，允许我将颜色填充注入 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( );

显然，除了处理缓存等之外，还有更多内容，但这就是肉-n-土豆。可能还想检查fill 属性是否已经存在。

【讨论】：