Btukfyl

I'm currently working on a project for my school. I need to make a SVG landscape generator in C++.
My teacher give us different C++ functions which draw svg forms on a output.svg. We then open the file in a web browser and the generated landscape appears.
His functions write HTML5 tags to draw svg like <circle> and <polygon>.

For example the function to draw an hexagon:

void Svgfile::addHexagone(double x1,double y1,double x2,double y2,double x3,double y3,double x4,double y4,

                      double x5,double y5,double x6,double y6, std::string colorFill){

m_ostrm << "<polygon points="" << x1 << "," << y1 << " " << x2 << "," << y2 << " " << x3 << "," << y3

        << " " << x4 << "," << y4 << " " << x5 << "," << y5 << " " << x6 << "," << y6

        << "" style="fill:" << colorFill << "" ></polygon>";

The problem is my program needs to scale differently each SVG object of my landscape to add variety.
I made a very simple rock represented by a grey hexagon using addHexagone. But <polygon> use the position of 6 points,
and the only way I find to resize it is to multiply each x and y of each points by a variable *size.
It's working, but it changes the position of my shape which is not what I need.
I've read some docs about ViewBox attribute on a SVG but I didn't manage to use it.
I also tried to add a attribute transform='size(10em)' but nothing changed.

To scale an object without changing its position, you must first find its position. One way of defining that is the 'center of mass' Find the center of mass of points method (just use 1 for each point as 'mass', so it's a simple average). Once you have the position, subtract it from all points of your object (in this case, polygon), this will bring it with its center of mass positioned at the origin, then scale the new point coordinates as you did, by multiplying with the scale. Then simply add back the center of mass coordinates to each point of your object, and you are done.

You can use transform property, just as in example:

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">

<g>

    <circle cx="20" cy="20" r="10"/>

 </g>

<g transform="scale(2)">

    <circle cx="50" cy="50" r="10"/>

</g>

</svg>

I'm not sure why we should be doing your assignments for you...

Obviously you need to scale your heagon points before you position it. Make a function that generates the hexagon points you want and then call your addHexagon() fmethod.

Something like this:

void generateHexagon(double centreX, double centreY, double hexagonSize, std::string fillColour)

{

  double  pts = new double[6][2];

  for (int step=0; step<6; step++)

  {

    double angle = step * 60f;

    pts[step][0] = centreX + hexagonSize * cos(angle);

    pts[step][1] = centreY + hexagonSize * sin(angle);

  }

  Svgfile::addHexagone(pts[0][0], pts[0][1],

                       pts[1][0], pts[1][1],

                       pts[2][0], pts[2][1],

                       pts[3][0], pts[3][1],

                       pts[4][0], pts[4][1],

                       pts[5][0], pts[5][1],

                       fillColour);

}