... Ok but slow in FFX 8 (kubuntu) Hi svg developpers,
i'm playing with bitmap, pattern, transform and cutting and i found some huge rendering problem. First, you can check your prefered navigator here : http://www.visualkit.com/emao/bugsvg/fit_01.html On the right side, a bitmap shows what is expected. Left side show what your navigator renders. Developping with firefox, when i finish writing my javascript, the rendering became very slow (20 object!), so i decided to check it in opera, and i saw the result : pattern is blured and cannot be recognize! For chrome and opera, javascript cuttings (image with red triangles) shows patterns not properly set in cuttings! i guess safari is in the same way ... Here is what i do in my svg First i create a pattern based on an image with a png I make 2 polygons to cut the image and show them. I transform the polygons to see what happens. Then i do the same thing with javascript, making more polygons. begin --------> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xmlns:ev="http://www.w3.org/2001/xml-events"; id="root" xml:space="preserve" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 300 500" > <script type="text/ecmascript"> <![CDATA[ svgDocument = document; xmlns="http://www.w3.org/2000/svg";; // ]]> </script> <!-- horizontal line --> <line x1="-300" y1="0" x2="300" y2="0" style="stroke: blue;" /> <!-- vertical line --> <line x1="0" y1="-300" x2="0" y2="300" style="stroke: blue;" /> <script type="text/ecmascript"> <![CDATA[ function Divide_rect(x,y,width,height,nbl,nbh){ //alert(data1); pasx=(width/nbl); pasy=(height/nbh); dest = svgDocument.getElementById("temp"); //alert(dest); for (i=0;i<nbl;i++) { xrect=pasx*i; for (j=0;j<nbh;j++) { yrect=pasy*j; t1p1x=xrect; t1p1y=yrect; t1p2x=xrect+(pasx); t1p2y=yrect+(pasy); t1p3x=xrect; t1p3y=yrect+(pasy); t1id="fit_" + i +"_"+ j; //t1points= t1p1x +","+ t1p1y+" "+t1p2x+","+t1p2y+" "+t1p3x+","+t1p3y; t1points= "M" +t1p1x +","+ t1p1y+" L"+t1p2x+","+t1p2y+" L"+t1p3x+","+t1p3y +" z"; //var t1 = svgDocument.createElementNS(xmlns,"polygon"); var t1 = svgDocument.createElementNS(xmlns,"path"); t1.setAttributeNS(null,"id", t1id); //t1.setAttributeNS(null, "points", t1points); t1.setAttributeNS(null, "d", t1points); t1.setAttributeNS(null, "fill", "url(#pmire)" ); t1.setAttributeNS(null, "stroke", "black" ); dest.appendChild(t1); t2p1x=xrect; t2p1y=yrect; t2p2x=xrect+(pasx); t2p2y=yrect; t2p3x=xrect+(pasx); t2p3y=yrect+(pasy); t2id="fit_" + i +"_"+ j; //t2points= t2p1x +","+ t2p1y+" "+t2p2x+","+t2p2y+" "+t2p3x+","+t2p3y; t2points= "M" +t2p1x +","+ t2p1y+" L"+t2p2x+","+t2p2y+" L"+t2p3x+","+t2p3y +" z"; //var t2 = svgDocument.createElementNS(xmlns,"polygon"); var t2 = svgDocument.createElementNS(xmlns,"path"); t2.setAttribute("id", t1id); //t2.setAttributeNS(null, "points", t2points); t2.setAttributeNS(null, "d", t2points); t2.setAttributeNS(null, "fill", "url(#pmire)" ); t2.setAttributeNS(null, "stroke", "red" ); dest.appendChild(t2); } } } //Divide_rect // ]]> </script> <defs> <pattern id="pmire" x="0" y="0" width="100" height="100" patternUnits="objectBoundingBox"> <image id="mire" x="0" y="0" width="100" height="100" xlink:href="./mire.png" /> </pattern> <polygon id="t1" points="0,0 0,100 100,100" fill="url(#pmire)" transform="translate(0,0) skewX(0)"/> <polygon id="t2" points="0,0 100,100 100,0" fill="url(#pmire)" transform="translate(0,0) skewX(0)"/> <g id="temp" > </g> </defs> <use xlink:href="#t1" x="10" y="40" transform="matrix(1,0.10,0.5,1,0,0)"/> <use xlink:href="#t2" x="10" y="40" transform="matrix(0.5,0.09,0.99,1,-15,0)" /> <use xlink:href="#mire" x="10" y="150" /> <use xlink:href="#t1" x="150" y="150" /> <use xlink:href="#t2" x="150" y="150" /> <use xlink:href="#temp" x="10" y="300" /> <script type="text/ecmascript"> <![CDATA[ var d = document.getElementById("mire"); var x=d.getAttributeNS(null,"x"); var y=d.getAttributeNS(null,"y"); var width=d.getAttributeNS(null,"width"); var height=d.getAttributeNS(null,"height"); var nbl=2; var nbh=2; Divide_rect(10,10,width,height,nbl,nbh) // ]]> </script> </svg> <---------end if you want mire.png go here : http://labo.visualkit.com/sites/labo.visualkit.com/files/mire.png but it is embeded in the test svg file. Did i made something wrong? What result do you have in your navigator? Cheers philippe ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
