Geek Answers Handbook

Understanding SVG Query String Parameters

I created an SVG file that I intend to use as a background image in CSS. I want to be able to change the fill color in SVG using the query string parameter, for example:

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

As I understand it, using the script tag in SVG, I can get the color parameter and update the fill color. Here is an example 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>

Going to the file directly or using an object tag seems to work, but for CSS background images or img tags, the color option is ignored.

I'm not quite sure what is happening here, and I was hoping there would be an explanation or alternative solution to what I was trying to accomplish (preferably without resorting to server processing).

Here is jsFiddle showing different rendering methods: http://jsfiddle.net/ehb7S/

+6
source share
2 answers

As a result, I created a server solution that allows me to enter color fill in an SVG file. Essentially, I redirect all SVG requests to a PHP file, which does the following for them:

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

Obviously, there is little more than that with caching processing and the like, but that is meat and potato. You can check if the fill attribute already exists.

+1
source

You can use the built-in SVG, which is hidden, modify and dynamically encode it as the URL of the data that you entered in the background-image property. Your HTML might look like this:

 <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>

and your javascript is kind of

 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) + ")" ); }

See proof of concept jsFiddle .

+4
source

More articles:


All Articles