「オンザフライで」SVGを作成するUIWebview

これは、UIWebviewでのSVGの操作に関する以前の投稿から続きます。詳細な背景情報については、最初にここをクリックしてください。UIWebview manipulating SVG 'on the fly'「オンザフライで」SVGを作成するUIWebview

今、同じフレームワーク内で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グラフィックをその場で作成するより良い方法があるなら、私は知りたいと思っています！

ありがとうございました。

出典

2011-08-10 Kangoo

実際にはかなり多くあります。

createElementNSの2番目の引数は、識別子（緑色の円）ではなく、作成している要素のタイプ（円）でなければなりません。

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

代わりにsetAttributeNSを使用してidを設定できます。すでにすぐにすべてをテストするための最良の方法ではない場合は余談として

svgDocument.documentElement.appendChild(shape);

：

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

また、それ以外の場合はあなたが買ってあげる、svgDocument.documentElementだけではなくsvgDocumentにエラーを追加デスクトップ上の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ファイルにすべてを保持してから、Webビューにロードする方法を検討する価値があるかもしれません。動的に作成されたタグstringByEvaluatingJavaScriptFromString。

出典

2011-08-10 09:39:49 Euan

もう一度あなたが救助に来た！私は近づいていたが、デバッガなしでトラブルシューティングできなかったことを知っていた。あなたのデスクトップブラウザでの作業は非常に賢明です。あなたはそれに言及しています。もう一度Euanに感謝します。あなたは私をたくさんのストレスから救ってくれました。 – Kangoo

「オンザフライで」SVGを作成するUIWebview

答えて

関連する問題