理解SVG查询字符串参数
Understanding SVG query-string parameters
我创建了一个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/
您可以使用隐藏的内联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)
+ ")"
);
}
参见jsFiddle的概念证明
我最终创建了一个服务器端解决方案,允许我将颜色填充注入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
属性是否已经存在,以及
相关文章:
- 从查询字符串参数推断出正确的数据类型
- 如何使用JQuery在HTML中创建包含字符串参数的引号的onclickjavascript链接
- 从带参数的字符串变量调用函数中的函数
- Javascript:用while循环在给定的count参数中重复一个字符串
- 如何格式化match()参数以定位电子邮件中的字符串
- 将JSON字符串转换为函数参数
- 如何用javascript替换Jquery字符串上的新参数
- 模版启动错误-类型错误(“参数”url'必须是字符串,而不是“+类型的url”)
- 在 URL 字符串中传递参数字符串
- 如何在附加的 html 中的字符串上连接 javascript 函数中的参数字符串
- jQuery:从参数字符串设置表单状态
- 使用 cookie 传递 URL 参数字符串
- 寻找一个正则表达式来解析 JS 的参数字符串
- 有必要限制node.js中GET请求参数字符串的大小吗
- 使用jquery获取javascript中的参数字符串
- 使用JavaScript更改url参数字符串
- 如何在提交GET表单后将变量插入到生成的url参数字符串中
- JavaScript:向JavaScript函数发送以逗号分隔的参数字符串
- 无法通过XMLHttpRequest发送参数字符串
- 从Javascript中获取url参数字符串