Hi,

Greetings all. This is my first post. I'm using Qt 4.6.0 and the QtWebKit module to display a runtime-generated HTML page. My question is: how do I dynamically create and insert SVG elements into a QWebElement (in my case, the document element of my HTML page)?

Details: I know it's possible, using JavaScript, to dynamically generate and insert SVG shapes inside a normal HTML page. Here's some example code that I'm trying to convert to Qt:

Qt Code:
  1. <html>
  2. <head>
  3. <title>My Page</title>
  4. <script type='text/javascript'>
  5. var svg;
  6. svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg:svg');
  7. svg.setAttribute('width', '300');
  8. svg.setAttribute('height', '100');
  9. svg.setAttribute('version', '1.1');
  10.  
  11. var circle;
  12. circle = document.createElementNS('http://www.w3.org/2000/svg', 'svg:circle');
  13. circle.setAttribute('cx', '100');
  14. circle.setAttribute('cy', '50');
  15. circle.setAttribute('r', '40');
  16. circle.setAttribute('stroke', 'black');
  17. circle.setAttribute('stroke-width', '2');
  18. circle.setAttribute('fill', 'red');
  19.  
  20. svg.appendChild(circle);
  21. document.documentElement.appendChild(svg);
  22. </script>
  23. </head>
  24. <body>
  25. <p>Hello, World!</p>
  26. </body>
  27. </html>
To copy to clipboard, switch view to plain text mode 

This works fine (it shows the red circle) in Safari 4.0.5, and I believe in most modern browsers. Here's my attempt at converting it to Qt:

Qt Code:
  1. #include <QtGui>
  2. #include <QtWebKit>
  3.  
  4. int
  5. main(int argc, char* argv[]) {
  6. QApplication app(argc, argv);
  7. QWebView view;
  8.  
  9. view.setHtml("<html xmlns:svg='http://www.w3.org/2000/svg'><head><title>My Page</title></head><body><div class='main'><p>Hello, QtWebKit!</p></div></body></html>");
  10. view.show();
  11. view.page()->currentFrame()->findFirstElement("div.main").appendInside("<p>Hello, QWebView!</p>");
  12.  
  13. QWebElement svg;
  14. svg.setOuterXml("<svg:svg></svg:svg>");
  15. svg.setAttribute("width", "300");
  16. svg.setAttribute("height", "100");
  17. svg.setAttribute("version", "1.1");
  18.  
  19. QWebElement circle;
  20. circle.setOuterXml("<svg:circle/>");
  21. circle.setAttribute("cx", "100");
  22. circle.setAttribute("cy", "50");
  23. circle.setAttribute("r", "40");
  24. circle.setAttribute("stroke", "black");
  25. circle.setAttribute("stroke-width", "2");
  26. circle.setAttribute("fill", "red");
  27.  
  28. svg.appendInside(circle);
  29. view.page()->currentFrame()->findFirstElement("div.main").appendInside(svg);
  30.  
  31. return app.exec();
  32. }
To copy to clipboard, switch view to plain text mode 

Unfortunately, this doesn't work (no circle). Anyone know of a way to do it?

Thanks,

Yawar

--
PGP: 0xE8C20DD4