Javascript 理解SVG查询字符串参数

我创建了一个SVG文件，打算在CSS中用作背景图像。我希望能够使用查询字符串参数更改SVG中的填充颜色，如下所示：

#rect{背景图像：url（'rect.svg'）；}
#rect.red{背景图像：url（'rect.svg？color=red'）；}

据我所知，使用SVG中的脚本标记，我能够获得

color

参数并更新填充颜色。下面是一个SVG示例：

直接转到文件，或使用对象标记似乎可行，但对于CSS背景图像或img标记，颜色参数被忽略

我不确定这里到底发生了什么，我希望能有一个解释或替代解决方案来解释我试图实现的目标（最好不要求助于服务器端处理）

---

下面是一个JSFIDLE，显示了不同的渲染方法：

您可以使用隐藏的内联SVG，更改它，并将其动态编码为数据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>

---

请参阅。

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

属性是否已经存在。

当SVG用作CSS背景图像或图像标记时，javascript被禁用。啊，这解释了为什么它不起作用。如果有其他聪明的解决方案可以通过CSS将参数传递给SVG，我会保留这个选项，但看起来我在这方面可能运气不好。为什么不在SVG之外使用一些js？@mihai，如果你能向我解释如何从JavaScript之外操作CSS背景SVG，那会很有帮助。是的，我一直想弄明白……但这不是不可能的，也不是无关紧要的：）

$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( );