Hi Chris, *> Then I recommend doing more research into how browsers work. :)*
I am quite sure my question is stupid ! But look to this simple code: <?xml version="1.0"?> <!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"> <body> <h1>Just a Rectangle</h1> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="150" height="150" id="svg1341"> <rect width="90" height="90" x="30" y="30" style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;stroke-width:1px" id="rect1353" /> </svg> </body> </html> if this code is in a file with filename - test.xhtml it's working - test.html nothing displayed. My current understanding is that if you want to add SVG to a HTML page, you need to use createElementNS and NS = "http://www.w3.org/2000/svg" in this case it will works even if the page is declared a HTML and not XHTML. You cannot insert SVG in a HTML page except in the SVG is added via javascript Is that correct ? * >I'm not sure I understand what you're doing. Can you share > the OpenLayers JavaScript you are attempting to use?* I finally manage to realize what I wanted. Maybe there is a better way. My Use case: In a KML file, I have two polygons. One is a mask, the second is the polygon I want to clip How I did: To realize that I want to use the "clipPath" of SVG First I need to add <defs><clipPath>mypolygonmask</clipPath><defs> to the SVG renderer Then I need to add clip-path attribut to my second polygon. GMLlayer.events.register("loadend", GMLlayer, function() { id = this.id; id = id.replace(/\./g, '\\.'); //Add <defs> to SVG Renderer when the layer is loaded var defs = document.createElementNS(" http://www.w3.org/2000/svg", "defs"); var clipPath = document.createElementNS(" http://www.w3.org/2000/svg", "clipPath"); clipPath.setAttribute("id","decoupe"); var path = document.createElementNS(" http://www.w3.org/2000/svg", "path"); path.setAttribute("id","decoupepath"); features = this.features; //Mask polygon is identified in the KML by name = Mask for(i=0;i<features.length;i++) { if (features[i].attributes.name == "Mask") { maskid = features[i].geometry.id; maskid = maskid.replace(/\./g, '\\.'); pathO = $("#"+maskid).get(0); #Path0 can be NULL, if the polygon mask is not in the current viewbox if (pathO) path.setAttribute("d",pathO.getAttribute('d')); continue; } } clipPath.appendChild(path); defs.appendChild(clipPath); root = $("#"+id+"_svgRoot").get(0); root.appendChild(defs); # Add clippath attributes $("#"+id+"_root").attr('clip-path',"url(#decoupe)"); }); //Any time the zoom is changed, the polygon is the SVG are regenerated by openlayers, so the mask should be updated too map.events.register("zoomend", GMLlayer, function(e) { id = this.id; id = id.replace(/\./g, '\\.'); features = this.features; for(i=0;i<features.length;i++) { if (features[i].attributes.name == "Mask") { maskid = features[i].geometry.id; maskid = maskid.replace(/\./g, '\\.'); pathO = $("#"+maskid).get(0); //alert(maskid); //alert($("#"+id+"_vroot path:first").attr('id')); pathClip = $("#decoupepath").get(0); if ((pathClip)&&(pathO)) pathClip.setAttribute("d",pathO.getAttribute('d')); continue; } } }); 2010/7/22 <[email protected]> > > On Jul 22, 2010, at 3:59 AM, ext Thomas PAPIN wrote: > > > Hello, > > > > I am trying to understand how the SVG renderer works. > > What I am not understanding is that there is SVG inline even if my > webpage is declared has HTML and not XHTML. > > I am not able to understand how this is possible. > > Then I recommend doing more research into how browsers work. :) > > > I am looking to that, because in the same time I try to use a clipPath > between two polygons in the SVG render of a layer. > > Even if I add a valid SVG, nothing is displayed. > > I'm not sure I understand what you're doing. Can you share > the OpenLayers JavaScript you are attempting to use? > > -- Chris
_______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
