UIWebview “即时”创建 SVG

发布于 2024-11-29 06:59:41 字数 803 浏览 1 评论 0原文

这是上一篇有关在 UIWebview 中操作 SVG 的文章的延续。有关更多背景信息,请先参阅此处:UIWebview“即时”操作 SVG

现在我正在尝试在同一框架内动态创建 SVG。

我尝试在 Javascript 中使用 createElementNS 方法,但没有成功。

这是我失败的尝试:

NSString *string = @"var svgDocument=document.getElementById('circle').getSVGDocument();var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'greencircle');shape.setAttributeNS(null, 'cx', 25);shape.setAttributeNS(null, 'cy', 25);shape.setAttributeNS(null, 'r',  20);shape.setAttributeNS(null, 'fill', 'green');svgDocument.appendChild(shape);";
[webView stringByEvaluatingJavaScriptFromString:string];

有人可以向我展示一个如何使用与上述类似的方法创建一个简单圆圈的示例吗?或者如果有更好的方法来动态创建 SVG 图形,那么我很想知道!

谢谢。

This is a continuation from a previous post regarding manipulation of SVG in a UIWebview. For more background info please see here first: UIWebview manipulating SVG 'on the fly'

Now I am trying to create SVG on the fly within the same frame work.

I have tried using the createElementNS method in Javascript without success.

Here is my failed attempt:

NSString *string = @"var svgDocument=document.getElementById('circle').getSVGDocument();var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'greencircle');shape.setAttributeNS(null, 'cx', 25);shape.setAttributeNS(null, 'cy', 25);shape.setAttributeNS(null, 'r',  20);shape.setAttributeNS(null, 'fill', 'green');svgDocument.appendChild(shape);";
[webView stringByEvaluatingJavaScriptFromString:string];

Could somebody please show me an example of how to create a simple circle with a similar approach as above. Or if there is a better way to create SVG graphics on the fly then I'd love to know!

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

凡间太子 2024-12-06 06:59:41

事实上你已经差不多了。

createElementNS 的第二个参数应该是您要创建的元素的类型(圆圈)而不是标识符(绿色圆圈),例如

var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');

您可以使用 setAttributeNS 设置 id。

shape.setAttributeNS(null, 'id', 'greencircle');

另外,附加到 svgDocument.documentElement 而不仅仅是 svgDocument,否则你会收到错误:

svgDocument.documentElement.appendChild(shape);

顺便说一句,如果你还没有快速测试所有这些内容的最佳方法是在桌面上的 Chrome 或 Safari 中使用开发人员工具打开。使事情更容易调试。

因此,如果您正在使用有关操作 SVG 的早期问题 你可以用以下方法进行原型设计:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SVG</title>
    <script>
    function make_circle() {
            // test new Javascript code here before compacting it
        var svgDocument=document.getElementById('circle').getSVGDocument();
        var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');
        shape.setAttributeNS(null, 'id', 'greencircle');            
        shape.setAttributeNS(null, 'cx', 25);
        shape.setAttributeNS(null, 'cy', 25);
        shape.setAttributeNS(null, 'r',  20);
        shape.setAttributeNS(null, 'fill', 'green');
        svgDocument.documentElement.appendChild(shape);
    }
    </script>
  </head>
  <body>
    <!-- click on link to test the code -->
    <a onclick='make_circle();'>Change color</a>
    <object id="circle" data="circle.svg" width="250" height="250" type="image/svg+xml"/> 
  </body>
</html>

显然你不能用这种方式测试任何触摸事件。 :(

就更好的方法而言,随着 Javascript 变得越来越复杂,可能值得研究如何将所有内容保存在应用程序包中单独的 .js 文件中,然后通过创建和插入动态创建的标签将其加载到 webview 中stringByEvaluatingJavaScriptFromString。

You're actually pretty much there.

The second argument to createElementNS should be the type of element you're creating (circle) rather than an identifier (greencircle) e.g.

var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');

You can set an id with setAttributeNS instead.

shape.setAttributeNS(null, 'id', 'greencircle');

Also, append to svgDocument.documentElement rather than just svgDocument, otherwise you'll get an error:

svgDocument.documentElement.appendChild(shape);

As an aside if you aren't already the best way to quickly test all this stuff is in Chrome or Safari on your desktop with the developer tools turned on. Makes things much easier to debug.

So if you're working with the files mentioned in the earlier question about manipulating SVG you could prototype with:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SVG</title>
    <script>
    function make_circle() {
            // test new Javascript code here before compacting it
        var svgDocument=document.getElementById('circle').getSVGDocument();
        var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');
        shape.setAttributeNS(null, 'id', 'greencircle');            
        shape.setAttributeNS(null, 'cx', 25);
        shape.setAttributeNS(null, 'cy', 25);
        shape.setAttributeNS(null, 'r',  20);
        shape.setAttributeNS(null, 'fill', 'green');
        svgDocument.documentElement.appendChild(shape);
    }
    </script>
  </head>
  <body>
    <!-- click on link to test the code -->
    <a onclick='make_circle();'>Change color</a>
    <object id="circle" data="circle.svg" width="250" height="250" type="image/svg+xml"/> 
  </body>
</html>

Obviously you can't test any of the touch events this way. :(

In terms of a better way as your Javascript gets more complex it might be worth working out how to keep everything in a separate .js file in your app bundle and then loading it into the webview by creating and inserting a dynamically created tag with stringByEvaluatingJavaScriptFromString.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文