iphone - UIWebview 处理 SVG 'on the fly'-6ren

iphone - UIWebview 处理 SVG 'on the fly'

转载作者：塔克拉玛干更新时间：2023-11-02 10:18:34

25

4

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

以下是我如何将 html 文件加载到 View Controller .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 中创建一个漂亮的红色小圆圈。现在我希望能够在 View Controller .m 文件中快速操纵圆圈。例如，当用户触摸 iPad 屏幕时，将填充颜色属性更改为绿色。这可能吗？

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

如有任何帮助，我们将不胜感激。谢谢。

最佳答案

您可以在页面首次加载后的任何时候通过将其传递给 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];

关于iphone - UIWebview 处理 SVG 'on the fly'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6991828/

25

4

0

文章推荐： ios - Xcode 中的 undefined symbol

文章推荐： iphone - 带有内联 SVG 的 UIWebview Html5

文章推荐： ios - iOS 版 Facebook 分享器

flying-saucer - Flying Saucer 不阅读样式表
我在 asp.net 应用程序(使用 IKVM)中使用 flysaucer 和 iText 将 HTML 转换为 PDF。如果我将样式直接放在 html 中，它工作正常(即使样式放在样式标签之间)，但
flying-saucer - Flying Saucer 是否支持伪元素
我一直在尝试将带有内容的伪元素添加到正在使用飞碟库转换的页面的 CSS 中。在常规浏览器中以 HTML 格式查看页面时，代码运行良好，我可以看到伪元素 (:before)。然而，当使用 Flying
flying-saucer - 用 Flying Saucer 旋转文本到pdf
我使用 Flying Saucer 和 itext 将 html 转换为 pdf，为了在垂直方向写入文本，我尝试了简单的 css: style="writing-mode: tb-rl"; 浏览器的变
xpages - 如何设置资源包 "On-The-Fly"？
我有一个组合框，用户可以在其中选择可用的语言。该应用程序包含每种语言的属性文件。在页面的资源部分，资源包是根据用户配置文档中的语言标记(DE、EN ...)计算的。有什么简单的方法可以根据组合框的值
youtube - 在YouTube播放列表的末尾添加视频 “on fly”
我已经在页面上嵌入了Youtube播放器，并使用JavaScript生成了“即时”播放列表。观看期间是否可以在播放列表的末尾添加新视频？我可以从列表的开头删除视频吗？最佳答案您可以，但是在尝试在视
groovy - 创建一个新类 "on the fly"？
...特别是在 Groovy 中(因此是标签)？在 Java 中你不能这样做......但在动态语言(例如 Python)中你通常可以。在 Eclipse 中尝试做类似在 Spock 特性(即测试
Emacs on-the-fly 模式改变
在编写 shell 脚本(据我所知通常没有 .* 后缀)时，我通常会执行以下操作 1) emacs foo2) 输入 #!/bin/sh3) 关闭并重新打开 emacs 以启用 shell-scrip
javascript - 填充javascript对象 "on the fly"
嗨，我有一个对象:var myobject = new Object;我想在以这种方式循环 jquery 输入集合时动态填充它的属性: $('.test').each(function(){
C追加/连接字符串 "on the fly"
我认为可以在 C 中即时连接字符串(字符数组)。 char* str1= "hello" " " "world"; 但是当我尝试以下操作时，我会收到一条错误消息(函数 fopen 的参数太少)。为什么
mysql - 将值映射到文本 "on the fly"
我有下表: store | dow | turnover ------+-----+----------- 1 | 1 | Eu59.426,00 1 | 2 | Eu33.
python - 如何区分文件和输出流 "on-the-fly"？
我需要使用标准 UNIX diff 命令和 python subprocess 模块创建一个差异文件。问题是我必须在不创建临时文件的情况下比较文件和流。我想过通过 os.mkfifo 方法使用命名管道
Fly-Pie：一个为鼠标操作为主的用户提供的有趣菜单启动器
Fly-Pie 是一个用于 GNOME 的独特的菜单启动器，以操作鼠标为主的用户可以用它进行一些操作。应用启动器可以方便地快速切换到一个活动窗口，启动新的应用，等等。 Ulau
Perl:无法将 "on-the-fly"数组传递给子
strftime()，根据 cpan.org: print strftime($template, @lt); 我只是想不出这个正确的 Perl 代码配方。它在我调用 strftime() 的地方不断
java - Flying Saucer 忽略自动换行
这里有没有人得到 word-wrap: break-word 在 flying-saucer 中工作？我在 flying-saucer 中将 html 渲染为 png。我可以找到一个 3 年前的话题
埃马克。 2 种语言的拼写检查 "on fly"
Windows 7，Emacs 25.1 我需要对我的自定义文本进行“即时”拼写检查(例如，强调不正确的单词)。但我在中写文字两种语言 : 英语和俄语。我想在两种语言的拼写检查之间轻松切换。什么是
itext - Flying Saucer 在第一页隐藏页眉和页脚
一直在玩飞碟R8，试过从首页隐藏页眉和页脚我的PDF。我关注了 hint试图遵循的 W3C 规范内容:元素() (W3C running elements)在我的 print.css 中。据描述
javascript - 为什么 Fly To 动画后鼠标滚轮缩小被阻止？
我正在使用由按钮触发的 FlyTo 动画来放大 map 。平移缩放动画结束后，无法使用鼠标滚轮缩小。如果我单击基本的缩小控件，它就可以工作，如果我在触摸屏上测试它，它就可以工作。如果我尝试使用鼠标滚
postgresql - 将在Docker容器中运行的PostgreSQL服务器连接到Wild-fly Docker容器？
我无法将Wild-fly容器连接到在其他容器中运行的PostgreSQL服务器。但是，我能够从主机连接到数据库。最佳答案看看networking和links。我建议联网。网络内部的容器名称可以由d
itext - Flying Saucer/iText
我正在使用 Flying Saucer/iText 生成报告。现在报告有一个条件，如果特定条件发生，报告应该移动到 pdf 的下一页，并在 PDF 上添加数据等等。问候帕万最佳答案您必须使用 c
Extjs-Ext.fly() null或不是对象
您好，我有一个 tabpanel，其中有两个面板，但是当我尝试使用 tabpanel.show() 显示一个面板时。我收到这条消息 Ext.fly() null or not an object do

首页

博学

6Ren·AI

商城

iphone - UIWebview 处理 SVG 'on the fly'