[OpenLayers-Users] SVG

Tue Jul 27 05:49:53 EDT 2010

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 <christopher.schmidt at nokia.com>

>
> 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100727/3326ab97/attachment.html