UIWebview 操作 SVG 'on the fly'答案

【问题标题】：UIWebview manipulating SVG 'on the fly'UIWebview 操作 SVG 'on the fly'
【发布时间】：2011-10-22 22:32:11
【问题描述】：

我想知道如何操作已加载到 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 中。

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

【问题讨论】：

标签： iphone html ios uiwebview svg

【解决方案1】：

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

因此，如果用于查找 SVG 对象并更改颜色的 Javascript 看起来像（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 并在触摸事件中执行代码但没有成功。这与我设置 HTML 和 SVG 的方式有关吗？
不，这是我的错。 :) 获取红色圆圈对象以便您可以更改颜色是一个两步过程 - (1) getElementById('circle') 获取 SVG 对象，然后 (2) getElementById('redcircle') 获取圆圈本身。我错过了我给出的示例代码中的一个步骤。现在在上面更正了。
伙计，你是一个血腥的传奇！谢谢你的帮助。非常感谢。
你知道是否可以使用这种方法创建一个 SVG 圆吗？我试过使用 createElementNS 但我没有任何运气。干杯。
如果你愿意的话，我在这里创建了另一个帖子：stackoverflow.com/questions/7004803/…