[OpenLayers-Users] SVG
Thomas PAPIN
thomas.papin at gmail.com
Tue Jul 27 06:00:59 EDT 2010
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 <thomas.papin at gmail.com>
> 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/97757ab3/attachment.html
More information about the Users
mailing list