Skip to content Skip to sidebar Skip to footer
Home / Html / Ios / Iphone / Svg / Uiwebview

Uiwebview Creating Svg 'on The Fly'

Post a Comment
This is a continuation from a previous post regarding manipulation of SVG in a UIWebview. For more background info please see here first: UIWebview manipulating SVG 'on the fly' No

Solution 1:

You're actually pretty much there.

The second argument to createElementNS should be the type of element you're creating (circle) rather than an identifier (greencircle) e.g.

var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');

You can set an id with setAttributeNS instead.

shape.setAttributeNS(null, 'id', 'greencircle');

Also, append to svgDocument.documentElement rather than just svgDocument, otherwise you'll get an error:

svgDocument.documentElement.appendChild(shape);

As an aside if you aren't already the best way to quickly test all this stuff is in Chrome or Safari on your desktop with the developer tools turned on. Makes things much easier to debug.

So if you're working with the files mentioned in the earlier question about manipulating SVG you could prototype with:

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>SVG</title><script>functionmake_circle() {
            // test new Javascript code here before compacting itvar svgDocument=document.getElementById('circle').getSVGDocument();
        var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');
        shape.setAttributeNS(null, 'id', 'greencircle');            
        shape.setAttributeNS(null, 'cx', 25);
        shape.setAttributeNS(null, 'cy', 25);
        shape.setAttributeNS(null, 'r',  20);
        shape.setAttributeNS(null, 'fill', 'green');
        svgDocument.documentElement.appendChild(shape);
    }
    </script></head><body><!-- click on link to test the code --><aonclick='make_circle();'>Change color</a><objectid="circle"data="circle.svg"width="250"height="250"type="image/svg+xml"/></body></html>

Obviously you can't test any of the touch events this way. :(

In terms of a better way as your Javascript gets more complex it might be worth working out how to keep everything in a separate .js file in your app bundle and then loading it into the webview by creating and inserting a dynamically created tag with stringByEvaluatingJavaScriptFromString.

Post a Comment for "Uiwebview Creating Svg 'on The Fly'"