我创建了一个 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>
直接进入文件,或者使用对象标签似乎可行,但对于 CSS 背景图像或 img 标签,颜色参数被忽略。
我不确定这里发生了什么,我希望对我想要完成的事情有一个解释或替代解决方案(最好不诉诸服务器端处理)。
这是一个显示不同渲染方法的 jsFiddle:http: //jsfiddle.net/ehb7S/