yawar
11th April 2010, 03:53
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:
<html>
<head>
<title>My Page</title>
<script type='text/javascript'>
var svg;
svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg:svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '100');
svg.setAttribute('version', '1.1');
var circle;
circle = document.createElementNS('http://www.w3.org/2000/svg', 'svg:circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('stroke', 'black');
circle.setAttribute('stroke-width', '2');
circle.setAttribute('fill', 'red');
svg.appendChild(circle);
document.documentElement.appendChild(svg);
</script>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
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:
#include <QtGui>
#include <QtWebKit>
int
main(int argc, char* argv[]) {
QApplication app(argc, argv);
QWebView view;
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>");
view.show();
view.page()->currentFrame()->findFirstElement("div.main").appendInside("<p>Hello, QWebView!</p>");
QWebElement svg;
svg.setOuterXml("<svg:svg></svg:svg>");
svg.setAttribute("width", "300");
svg.setAttribute("height", "100");
svg.setAttribute("version", "1.1");
QWebElement circle;
circle.setOuterXml("<svg:circle/>");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("stroke", "black");
circle.setAttribute("stroke-width", "2");
circle.setAttribute("fill", "red");
svg.appendInside(circle);
view.page()->currentFrame()->findFirstElement("div.main").appendInside(svg);
return app.exec();
}
Unfortunately, this doesn't work (no circle). Anyone know of a way to do it?
Thanks,
Yawar
--
PGP: 0xE8C20DD4
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:
<html>
<head>
<title>My Page</title>
<script type='text/javascript'>
var svg;
svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg:svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '100');
svg.setAttribute('version', '1.1');
var circle;
circle = document.createElementNS('http://www.w3.org/2000/svg', 'svg:circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('stroke', 'black');
circle.setAttribute('stroke-width', '2');
circle.setAttribute('fill', 'red');
svg.appendChild(circle);
document.documentElement.appendChild(svg);
</script>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
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:
#include <QtGui>
#include <QtWebKit>
int
main(int argc, char* argv[]) {
QApplication app(argc, argv);
QWebView view;
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>");
view.show();
view.page()->currentFrame()->findFirstElement("div.main").appendInside("<p>Hello, QWebView!</p>");
QWebElement svg;
svg.setOuterXml("<svg:svg></svg:svg>");
svg.setAttribute("width", "300");
svg.setAttribute("height", "100");
svg.setAttribute("version", "1.1");
QWebElement circle;
circle.setOuterXml("<svg:circle/>");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("stroke", "black");
circle.setAttribute("stroke-width", "2");
circle.setAttribute("fill", "red");
svg.appendInside(circle);
view.page()->currentFrame()->findFirstElement("div.main").appendInside(svg);
return app.exec();
}
Unfortunately, this doesn't work (no circle). Anyone know of a way to do it?
Thanks,
Yawar
--
PGP: 0xE8C20DD4