Forum > FPvectorial

Group elements in svg output ?

(1/1)

BobT:
Using fpvectorial, is it possible to generate an svg document / file with grouped elements ? My immediate goal is to be able to group simple rectangle shapes each with their own text element as a label, but a general solution capable of deeper levels of groupiing would have other uses as well.

wp:
There is an AddLayer command which, for svg, is written as a new <g> node, i.e. groups the added elements. You must call SetCurrentLayer to activate the new layer, or combine both in AddLayerAndSetAsCurrent. ClearLayerselection returns to the first layer.

The following code

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---program fpvwritegroup; {$mode objfpc}{$H+} uses  fpimage, fpCanvas,  fpvectorial, svgvectorialwriter, fpvutils, fpvectorialpkg; const  cFormat = vfSVG;  cExtension = '.svg';var  Vec: TvVectorialDocument;  Page: TvVectorialPage;begin  Vec := TvVectorialDocument.Create;  try    // All documents are 10cm x 10cm    Vec.Width := 100;    Vec.Height := 100;    Page := Vec.AddPage();     Page.Clear;     with Page.AddCircle(0, 0, 10) do    begin      Brush.Color := colYellow;      Brush.Style := bsSolid;    end;     Page.AddLayerAndSetAsCurrent('g1');    with Page.AddCircle(50, 50, 10) do    begin      Brush.Color := colRed;      Brush.Style := bsSolid;    end;    with Page.AddCircle(55, 50, 10) do    begin      Brush.Color := colGreen;      Brush.Style := bsSolid;    end;     Page.ClearLayerSelection;    with Page.AddCircle(100, 100, 10) do    begin      Brush.Color := colBlue;      Brush.Style := bsSolid;    end;     Vec.WriteToFile('layer_demo' + cExtension, cFormat);   finally    Vec.Free;  end;end.      
creates a file showing the <g> nodes as expected:


--- Quote ---  <g id="layer1">
  <circle cx="0" cy="354.32999999999998" r="35.433" style="stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; fill:#FFFF00;" />
  <g id="layer2">
  <circle cx="177.16499999999999" cy="177.16499999999999" r="35.433" style="stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; fill:#FF0000;" />
  <circle cx="194.88149999999999" cy="177.16499999999999" r="35.433" style="stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; fill:#00FF00;" />
  </g>
  <circle cx="354.32999999999998" cy="0" r="35.433" style="stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; fill:#0000FF;" />
  </g>
--- End quote ---

BobT:
Thanks wp. I'd fixed my ideas around the Inkscape 'layers' concept and missed that the fpvectorial 'layer' is +-what Inkscape calls a group.

Navigation

[0] Message Index

Go to full version