CODEWITHSUNDEEP
iphonehtmliosuiwebviewsvg
Kangoo
Kangoo

Reputation: 143

UIWebview manipulating SVG 'on the fly'

I would like to know how to manipulate SVG files that I have loaded into a UIWebview. Currently I am loading an SVG file into an HTML file and then loading that into a UIWebview. I presume that you would use Javascript to do this but am not sure how the go about it exactly. Ideally I would like to be able to manipulate the SVG on the fly in an iPad app. I am aware that you can 'inject' code into the UIWebview but have had no success with my attempts. Clear as mud? Well perhaps a bit of code will help.

Here is how I load the html file into the UIWebview inside the view controller .m file:

- (void)viewDidLoad 
{
    [super viewDidLoad];

    NSString*  path    = [[NSBundle mainBundle] pathForResource:@"SVG" ofType:@"html"];
    NSString*  content = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

    webView = [UIWebView new];
    webView.frame = CGRectMake(0, 0, 1024, 768);
    webView.dataDetectorTypes = UIDataDetectorTypeAll;
    webView.userInteractionEnabled = YES;
    [webView loadHTMLString:content baseURL:[[NSBundle mainBundle] bundleURL]];

    [self.view addSubview:webView];
    [webView release];
}

Here is the code inside the html file that is loaded into the UIWebview:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SVG</title>
  </head>
  <body>
    <object id="circle" data="Circle.svg" width="250" height="250" type="image/svg+xml"/> 
  </body>
</html>

...and finally here is the code inside the SVG file:

<svg xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="200" cy="50" r="50" fill="red" />
</svg>

Which creates a nice little red circle in the UIWebview. Now I would like to be able to manipulate the circle on the fly back in the view controller .m file. For example when the user touches the iPad screen, change the fill color attribute to green. Is this even possible?

I hope this all makes sense. It's a bit convoluted. But ultimately what I am trying to do is create graphics on the fly with SVG in an HTML framework and display it in a UIWebview.

Any help would be appreciated. Thanks.

Upvotes: 2

Views: 2689

Answers (1)

Euan
Euan

Reputation: 3972

You can execute arbitrary Javascript by passing it to stringByEvaluatingJavaScriptFromString on the webView at any point after the page has first loaded - like in response to a touch event.

So if the Javascript to find the SVG object and change the color looks something like (YMMV, haven't actually tested this):

var path=document.getElementById("circle").getSVGDocument().getElementById("redcircle");path.style.setProperty("fill", "#00FF00", "");

You can execute it with:

NSString *string = @"var path=document.getElementById('circle').getSVGDocument().getElementById('redcircle');path.style.setProperty('fill', '#00FF00', '');";
[webView stringByEvaluatingJavaScriptFromString:string];

Upvotes: 3

Related Questions