Question

我想知道如何操作已加载到UIWebview中的SVG文件。目前我正在将SVG文件加载到HTML文件中，然后将其加载到UIWebview中。我假设您将使用Javascript来执行此操作，但我不确定如何完成此操作。理想情况下，我希望能够在iPad应用程序中即时操作SVG。我知道你可以在UIWebview中“注入”代码但是我的尝试没有成功。像泥一样清楚？好吧，也许一些代码会有所帮助。

以下是我如何将html文件加载到视图控制器.m文件中的UIWebview中：

- (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];
}

以下是加载到UIWebview中的html文件中的代码：

<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>

...最后这里是SVG文件中的代码：

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

这会在UIWebview中创建一个漂亮的小红圈。现在我希望能够在视图控制器.m文件中操纵圆圈。例如，当用户触摸iPad屏幕时，将填充颜色属性更改为绿色。这甚至可能吗？

我希望这一切都有道理。这有点令人费解。但最终我要做的是在HTML框架中使用SVG动态创建图形并将其显示在UIWebview中。

任何帮助将不胜感激。谢谢。

Answer 1

您可以在页面首次加载后的任何时候将其传递给webView上的stringByEvaluatingJavaScriptFromString来执行任意Javascript - 就像响应触摸事件一样。

所以如果Javascript找到SVG对象并改变颜色看起来像（YMMV，实际上没有测试过这个）：

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

您可以使用以下命令执行它：

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

UIWebview在运行中操纵SVG

1 个答案: