UIWebview creating SVG 'on the fly'

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'

Now I am trying to create SVG on the fly within the same frame work.

I have tried using the createElementNS method in Javascript without success.

Here is my failed attempt:

NSString *string = @"var svgDocument=document.getElementById('circle').getSVGDocument();var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'greencircle');shape.setAttributeNS(null, 'cx', 25);shape.setAttributeNS(null, 'cy', 25);shape.setAttributeNS(null, 'r',  20);shape.setAttributeNS(null, 'fill', 'green');svgDocument.appendChild(shape);";
[webView stringByEvaluatingJavaScriptFromString:string];

Could somebody please show me an example of how to create a simple circle with a similar approach as above. Or if there is a better way to create SVG graphics on the fly then I'd love to know!

Thanks.

标签： iphone html ios uiwebview svg

1条回答

虎瘦雄心在

2楼-- · 2019-08-22 09:50

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:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SVG</title>
    <script>
    function make_circle() {
            // test new Javascript code here before compacting it
        var 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 -->
    <a onclick='make_circle();'>Change color</a>
    <object id="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.

0人赞添加讨论(0) 举报

UIWebview creating SVG 'on the fly'

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间