Just to complete by previous message, this is working in both HTML and XHTML page.<br><br><?xml version="1.0"?> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"><br>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <br><body><br><h1>Just a Rectangle</h1> <br><div id="test"><br></div><br>
<script type="text/javascript"><br> var svg = document.createElementNS("<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>", "svg");<br> svg.setAttribute("width","150");<br>
svg.setAttribute("height","150");<br> var rect = document.createElementNS("<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>", "rect");<br> rect.setAttribute("width","90");<br>
rect.setAttribute("height","90");<br> rect.setAttribute("x","30");<br> rect.setAttribute("y","30");<br> rect.setAttribute("style","fill:#0000ff;fill-opacity:0.75;stroke:#000000;stroke-width:1px");<br>
svg.appendChild(rect);<br> div = document.getElementById("test");<br> div.appendChild(svg);<br> </script> <br> </body><br></html><br><br><div class="gmail_quote">2010/7/27 Thomas PAPIN <span dir="ltr"><<a href="mailto:thomas.papin@gmail.com">thomas.papin@gmail.com</a>></span><br>
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">Hi Chris,<div class="im"><br><br><i>> Then I recommend doing more research into how browsers work. :)</i><br>
<br></div>I am quite sure my question is stupid ! But look to this simple code:<br><br><?xml version="1.0"?> <br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"><br><html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"> <br>
<body><br><h1>Just a Rectangle</h1> <br><svg<br> xmlns:svg="<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>" xmlns="<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>" version="1.0" width="150" height="150" id="svg1341"><br>
<rect width="90" height="90" x="30" y="30" style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;stroke-width:1px" id="rect1353" /><br></svg> <br>
</body><br></html><br><br> if this code is in a file with filename<br>- test.xhtml it's working<br>- test.html nothing displayed.<br><br>My current understanding is that if you want to add SVG to a HTML page, you need to use createElementNS and NS = "<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>"<br>
in this case it will works even if the page is declared a HTML and not XHTML.<br>You cannot insert SVG in a HTML page except in the SVG is added via javascript <br><br>Is that correct ?<div class="im"><br><i><br><br>>I'm not sure I understand what you're doing. Can you share<br>
> the OpenLayers JavaScript you are attempting to use?</i><br><br></div>I finally manage to realize what I wanted. Maybe there is a better way.<br><br>My Use case:<br>In a KML file, I have two polygons. One is a mask, the second is the polygon I want to clip<br>
<br>How I did:<br>To realize that I want to use the "clipPath" of SVG<br>First I need to add <defs><clipPath>mypolygonmask</clipPath><defs> to the SVG renderer<br>Then I need to add clip-path attribut to my second polygon.<br>
<br> GMLlayer.events.register("loadend", GMLlayer, function() { <br> id = <a href="http://this.id" target="_blank">this.id</a>;<br> id = id.replace(/\./g, '\\.');<br>
<br> //Add <defs> to SVG Renderer when the layer is loaded<br> var defs = document.createElementNS("<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>", "defs");<br>
var clipPath = document.createElementNS("<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>", "clipPath");<br> clipPath.setAttribute("id","decoupe");<br>
var path = document.createElementNS("<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>", "path");<br> path.setAttribute("id","decoupepath");<br>
<br> features = this.features;<br> //Mask polygon is identified in the KML by name = Mask<br> for(i=0;i<features.length;i++) {<br>
if (features[i].<a href="http://attributes.name" target="_blank">attributes.name</a> == "Mask") {<br> maskid = features[i].<a href="http://geometry.id" target="_blank">geometry.id</a>;<br>
maskid = maskid.replace(/\./g, '\\.');<br> pathO = $("#"+maskid).get(0);<br><br> #Path0 can be NULL, if the polygon mask is not in the current viewbox<br>
if (pathO)<br> path.setAttribute("d",pathO.getAttribute('d'));<br> continue;<br> }<br>
}<br> <br> clipPath.appendChild(path);<br> defs.appendChild(clipPath);<br> <br> root = $("#"+id+"_svgRoot").get(0);<br>
root.appendChild(defs);<br> <br> # Add clippath attributes<br> $("#"+id+"_root").attr('clip-path',"url(#decoupe)");<br>
}); <br><br><br> //Any time the zoom is changed, the polygon is the SVG are regenerated by openlayers, so the mask should be updated too<br> map.events.register("zoomend", GMLlayer, function(e) { <br>
id = <a href="http://this.id" target="_blank">this.id</a>;<br> id = id.replace(/\./g, '\\.');<br> <br> features = this.features;<br>
for(i=0;i<features.length;i++) {<br>
if (features[i].<a href="http://attributes.name" target="_blank">attributes.name</a> == "Mask") {<br> maskid = features[i].<a href="http://geometry.id" target="_blank">geometry.id</a>;<br>
maskid = maskid.replace(/\./g, '\\.');<br> pathO = $("#"+maskid).get(0);<br> //alert(maskid);<br> //alert($("#"+id+"_vroot path:first").attr('id'));<br>
pathClip = $("#decoupepath").get(0);<br> if ((pathClip)&&(pathO))<br> pathClip.setAttribute("d",pathO.getAttribute('d'));<br>
continue;<br> }<br> }<br> });<br><br><br><div class="gmail_quote">2010/7/22 <span dir="ltr"><<a href="mailto:christopher.schmidt@nokia.com" target="_blank">christopher.schmidt@nokia.com</a>></span><div>
<div></div><div class="h5"><br>
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;"><div><br>
On Jul 22, 2010, at 3:59 AM, ext Thomas PAPIN wrote:<br>
<br>
> Hello,<br>
><br>
> I am trying to understand how the SVG renderer works.<br>
> What I am not understanding is that there is SVG inline even if my webpage is declared has HTML and not XHTML.<br>
> I am not able to understand how this is possible.<br>
<br>
</div>Then I recommend doing more research into how browsers work. :)<br>
<div><br>
> 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.<br>
> Even if I add a valid SVG, nothing is displayed.<br>
<br>
</div>I'm not sure I understand what you're doing. Can you share<br>
the OpenLayers JavaScript you are attempting to use?<br>
<br>
-- Chris</blockquote></div></div></div><br>
</blockquote></div><br>