Just to complete by previous message, this is working in both HTML and XHTML page.
<?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> <div id="test"> </div> <script type="text/javascript"> var svg = document.createElementNS("http://www.w3.org/2000/svg";, "svg"); svg.setAttribute("width","150"); svg.setAttribute("height","150"); var rect = document.createElementNS("http://www.w3.org/2000/svg";, "rect"); rect.setAttribute("width","90"); rect.setAttribute("height","90"); rect.setAttribute("x","30"); rect.setAttribute("y","30"); rect.setAttribute("style","fill:#0000ff;fill-opacity:0.75;stroke:#000000;stroke-width:1px"); svg.appendChild(rect); div = document.getElementById("test"); div.appendChild(svg); </script> </body> </html> 2010/7/27 Thomas PAPIN <[email protected]> > 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
