UIWebview“动态"创建SVG [英] UIWebview creating SVG 'on the fly'
问题描述
这是上一篇有关UIWebview中SVG操纵的文章的续篇.有关更多背景信息，请首先在此处查看: UIWebview即时"操作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'
现在，我正在尝试在同一框架内动态创建SVG.
Now I am trying to create SVG on the fly within the same frame work.
我尝试在Javascript中使用createElementNS方法，但没有成功.
I have tried using the createElementNS method in Javascript without success.
这是我失败的尝试:
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图形的方法，那么我很想知道！
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!
谢谢.
推荐答案
您实际上在那里.
createElementNS的第二个参数应该是要创建的元素的类型(圆圈)，而不是标识符(绿色圆圈)，例如
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');
您可以改为使用setAttributeNS设置ID.
You can set an id with setAttributeNS instead.
shape.setAttributeNS(null, 'id', 'greencircle');
此外，请附加到svgDocument.documentElement而不是svgDocument上，否则会出现错误:
Also, append to svgDocument.documentElement rather than just svgDocument, otherwise you'll get an error:
svgDocument.documentElement.appendChild(shape);
顺便说一句，如果您还不是快速测试所有这些东西的最佳方法，那就是在桌面上的Chrome或Safari中打开开发人员工具.使事情更容易调试.
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.
因此，如果您使用的是前面提到的有关处理SVG的问题， 您可以使用以下方法进行原型制作:
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. :(
从更好的角度来看，随着Javascript变得越来越复杂，可能值得研究如何将所有内容保存在应用程序包的单独的.js文件中，然后通过创建并插入动态创建的标签将其加载到Webview中使用stringByEvaluatingJavaScriptFromString.
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.
这篇关于UIWebview“动态"创建SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
