PDA

View Full Version : Visualize svg object in a tabpanel



Trio87
21 Jul 2010, 12:53 AM
hi all.
i'm trying to visualize an svg in a tab of a tabpanel but i can't make it work.

Datas arrive from a server and they are like this:


<?xml-stylesheet type="text/css" href="http://ltw1001.web.cs.unibo.it/svg.css" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg= "http://www.w3.org/2000/svg">
<body>
<svg:svg width="500" height="560" version="1.1" >
<svg:line id="no1" x1="280" y1="220" x2="186" y2="350"/>
<svg:line id="no1" x1="280" y1="220" x2="372" y2="350"/>
<svg:line id="no2" x1="186" y1="350" x2="140" y2="480"/>
<svg:line id="no2" x1="186" y1="350" x2="280" y2="480"/>
<svg:line id="no2" x1="186" y1="350" x2="420" y2="480"/>
<svg:line id="a1" x1="280" y1="90" x2="280" y2="220"/>
<svg:g transform="translate(280 220)">
<svg:circle class="witness-greek" id="no1" r="40"/>
<svg:path transform="translate (61.421033,-1098.0507)" d="m -53.421033,1090.0507 4.22844,0 -2.56194,9.7844 c -0.49748,1.8597 -0.83742,3.001 -1.01981,3.4237 0.66328,2.5922 1.62504,3.8883 2.8853,3.8883 1.49236,0 2.26344,-0.8733 2.3132,-2.6204 l 0.89543,0 c -0.0497,1.6342 -0.40214,2.9549 -1.05711,3.9621 -0.65501,1.0076 -1.51314,1.5112 -2.57436,1.5112 -0.87887,0 -1.53386,-0.3029 -1.96499,-0.9086 -0.43116,-0.6059 -0.89544,-1.8457 -1.39289,-3.7193 -1.72456,3.0851 -4.54351,4.6279 -8.45687,4.6279 -2.66973,0 -4.7922,-0.884 -6.36752,-2.6521 -1.5753,-1.7681 -2.36296,-4.3005 -2.36294,-7.5972 -2e-5,-3.2404 0.86226,-5.7621 2.58681,-7.5654 1.72452,-1.8035 3.79727,-2.7051 6.21826,-2.7051 1.70795,0 3.10914,0.5142 4.20357,1.5427 1.0944,1.0286 2.06444,2.7051 2.91015,5.0297 l 1.51727,-6.0019 z m -2.18884,8.2839 c -0.77937,-2.268 -1.64993,-4.0397 -2.61168,-5.3146 -0.96177,-1.2751 -2.11422,-1.9125 -3.45736,-1.9125 -3.03452,0 -4.55179,3.015 -4.55179,9.0448 0,5.7197 1.45095,8.5798 4.35279,8.5798 2.52047,0 4.38596,-2.522 5.59646,-7.5655 l 0.67158,-2.8319 z" />
</svg:g>
<svg:g transform="translate(186 350)">
<svg:circle class="witness-greek" id="no2" r="40"/>
<svg:path transform="translate (-19.267, -1535.37)" d="m 14.975576,1554.3738 -4.07425,0 c 0.592564,-2.1488 0.888941,-4.0879 0.888941,-5.8324 l 0,-20.7505 c 0,-2.162 0.251029,-3.7688 0.753078,-4.8214 0.502049,-1.0562 1.481516,-1.9867 2.938392,-2.7911 1.456875,-0.8085 3.279936,-1.2111 5.469354,-1.2112 2.600866,0 4.786179,0.5287 6.555755,1.5921 1.76959,1.0605 2.654434,2.5675 2.654434,4.5235 0,2.2878 -1.407422,4.1629 -4.22235,5.6218 4.197718,1.5244 6.296522,3.9222 6.296522,7.1856 0,1.7761 -0.555613,3.3676 -1.666749,4.7753 -1.111136,1.4031 -2.395092,2.4037 -3.851976,3.0003 -1.456874,0.5943 -3.197629,0.8967 -5.222434,0.8967 -2.304571,0 -4.181193,-0.6677 -5.629856,-2.0004 l 0,3.5439 c 0,2.4366 -0.296286,4.5262 -0.888861,6.2678 l 0,0 z m 0.888861,-11.5315 c 1.284048,1.6429 3.078362,2.4602 5.382938,2.4602 2.222269,0 3.851972,-0.6267 4.8891,-1.8783 1.037044,-1.2481 1.555617,-2.77 1.555617,-4.5605 0,-1.3723 -0.341643,-2.7765 -1.024724,-4.2021 -0.683191,-1.432 -1.55981,-2.5186 -2.6297,-3.2721 -0.987767,0.1939 -1.876711,0.2865 -2.666834,0.2865 -1.662643,0 -2.493915,-0.334 -2.493915,-1.0106 0,-0.6088 0.699599,-0.9118 2.0989,-0.9118 0.872434,0 1.958833,0.1517 3.259311,0.458 1.168802,-1.5248 1.753159,-3.1834 1.753159,-4.9742 0,-1.6028 -0.456788,-2.8268 -1.370372,-3.678 -0.913671,-0.853 -2.103011,-1.276 -3.568099,-1.276 -1.168709,0 -2.16879,0.2518 -3.000077,0.7589 -0.831269,0.5109 -1.403304,1.1159 -1.716108,1.822 -0.312803,0.7034 -0.469196,1.8588 -0.469196,3.4564 l 0,16.5216 z" />
</svg:g>
<svg:g transform="translate(280 90)">
<svg:circle class="witness" id="a1" r="40"/>
<svg:text class="witness" id="a1" y="5">a1
</svg:text>
</svg:g>
<svg:g transform="translate(372 350)">
<svg:circle class="witness" id="a2" r="40"/>
<svg:text class="witness" id="a2" y="5">a2
</svg:text>
</svg:g>
<svg:g transform="translate(140 480)">
<svg:circle class="witness" id="a3" r="40"/>
<svg:text class="witness" id="a3" y="5">a3
</svg:text>
</svg:g>
<svg:g transform="translate(280 480)">
<svg:circle class="witness" id="a4" r="40"/>
<svg:text class="witness" id="a4" y="5">a4
</svg:text>
</svg:g>
<svg:g transform="translate(420 480)">
<svg:circle class="witness" id="pub" r="40"/>
<svg:text class="witness" id="pub" y="5">pub
</svg:text>
</svg:g>
</svg:svg>
</body>
</html>


On client side i tried 3 different solutions:
-html: result.responseText
-html: result.responseHTML
-html: result.responseXML

and on server side i tried with 2 contentType:
-image/svg+xml
-text/xml (reccomended by server programmers)

always -> result.responseText == a1a2a3a4pub
with image/svg+xml -> nothing work
with text/xml -> result.responseXML == [object XMLDocument]

How can i make the svg (a sorted tree) visualized?
Thank you all.

Trio87
21 Jul 2010, 3:05 AM
It's ok also if the svg will not be visualized in a tabpanel...in any other component will be fine!

Trio87
21 Jul 2010, 6:15 AM
Solved....
using contentType("text/xml") and writing result.responseXML in an iframe all works