31692

UIWebview creating SVG 'on the fly'

Question:

This is a continuation from a previous post regarding manipulation of SVG in a UIWebview. For more background info please see here first: <a href="https://stackoverflow.com/questions/6991828/uiwebview-manipulating-svg-on-the-fly" rel="nofollow">UIWebview manipulating SVG 'on the fly'</a>

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.

Answer1:

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 <a href="https://stackoverflow.com/questions/6991828/uiwebview-manipulating-svg-on-the-fly" rel="nofollow">earlier question about manipulating SVG</a> 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.

Recommend

  • How do I call the Pie function?
  • D3: How to draw multiple Convex hulls on Groups of Force layout nodes?
  • Google custom search API with pagination
  • How to assign a prop value to a state in react
  • Flexbox: how to add margin / vertical spacing for the case there is more than one row?
  • Image scaling geometry
  • In LinqPad, is there a way to serialize type XML column as string?
  • Assembly Language Absolute addresses and segment registers
  • Golang Struct Won't Marshal to JSON [duplicate]
  • WebView: webpage not available but I load it from an html string
  • Phonegap Android App, open links within app?
  • Replace Node Name
  • pure javascript dom dynamic insert, update and delete
  • Get attributes of existing SVG elements and bind as data with d3.js
  • D3 - Drawing a path between DOM elements
  • Setting color in a row of a Jtable
  • input type=“file” accept=“image/*” doesn't work in phone gap?
  • After converting my FBX file to a .gltf, the model is incredibly small, why?
  • Why is OpenID Connect considered mobile friendly compared to SAML
  • Can a variable be stored within an image or div tag?
  • UIButton Borders Function Only Gives Back White Borders
  • setContentView() is not enough to switch between layouts?
  • Why does the following throw an “Object doesn't support property or method 'importNode
  • jQuery: add elements until a particular height is reached
  • Salesforce Different WSDL files and when to use
  • AndEngine Applying Transparancy to AndEngine View
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • Jetty 9 HashLoginService
  • d3 v4 drag and drop with TypeScript
  • Installing Apache MyFaces 2 on WildFly 8.2.0
  • How to modify the colors in the legend of a plot using a fill gradient?
  • Read a local file using javascript
  • ImageMagick, replace semi-transparent white with opaque white
  • Cannot connect to cassandra from Spark
  • Retrieving value from sql ExecuteScalar()
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • Cross-Platform Protobuf Serialization
  • Alternatives to the OPTIONAL fallback SPARQL pattern?
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Matrix multiplication with MKL