Question

这是关于在UIWebview中操纵SVG的前一篇文章的延续。有关更多背景信息，请先在此处查看：UIWebview manipulating SVG 'on the fly'

现在我正在尝试在相同的框架内动态创建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图形，那么我很想知道！

感谢。

Answer 1

你其实就在那里。

createElementNS的第二个参数应该是您正在创建的元素的类型（圆圈）而不是标识符（greencircle），例如。

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中打开开发人员工具。使调试更容易。

因此，如果您正在使用earlier question about manipulating 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中with stringByEvaluatingJavaScriptFromString。

UIWebview即时创建SVG

1 个答案: