UIWebview操作SVG'实时' [英] UIWebview manipulating SVG 'on the fly'
问题描述
我想知道如何操作已加载到UIWebview中的SVG文件。目前我正在将SVG文件加载到HTML文件中，然后将其加载到UIWebview中。我认为你会使用Javascript来做到这一点，但我不知道如何完全去做。理想情况下，我希望能够在iPad应用程序中随时操作SVG。我知道你可以将代码'注入'UIWebview，但是我的尝试没有成功。清除泥浆？也许有一些代码会有帮助。
以下是我如何将html文件加载到视图控制器.m文件内的UIWebview中：
- （void）viewDidLoad
{
[super viewDidLoad];
NSString * path = [[NSBundle mainBundle] pathForResource：@SVGofType：@html];
NSString * content = [NSString stringWithContentsOfFile：路径编码：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发布];
}
以下是加载到UIWebview的html文件中的代码：
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> SVG< / title>
< / head>
< body>
< object id =circledata =Circle.svgwidth =250height =250type =image / svg + xml/>
< / body>
< / html>
...最后，这里是SVG文件中的代码：
< svg xmlns =http://www.w3.org/2000/svg>
在UIWebview中创建一个漂亮的小红圈。现在我想能够在视图控制器.m文件中回放操作该圆。例如，当用户触摸iPad屏幕时，将填充颜色属性更改为绿色。这甚至有可能吗？
我希望这一切都有道理。这有点复杂。但最终我想要做的就是在HTML框架中使用SVG随时创建图形并将其显示在UIWebview中。
任何帮助将不胜感激。谢谢。
您可以在页面第一次加载之后的任意时刻通过将它传递给webView上的stringByEvaluatingJavaScriptFromString来执行任意Javascript - 就像所以如果Javascript找到SVG对象并改变颜色看起来像（YMMV，实际上没有测试过这个）： p>
var path = document.getElementById（circle）。getSVGDocument（）。getElementById（redcircle）; path.style.setProperty （fill，＃00FF00，）;
您可以执行以下操作：
<$ p （））; $ p> NSString * string = @var path = document.getElementById（'circle'）。getSVGDocument（）。getElementById（'redcircle'）; path.style.setProperty（'fill'，' 00FF00'，''）;;
[webView stringByEvaluatingJavaScriptFromString：string];
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.
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];
这篇关于UIWebview操作SVG'实时'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
