CODEWITHSUNDEEP
svgpathalignmentcentering
maxjvh
maxjvh

Reputation: 224

Programmatically centering svg path

I'm working on a PHP script that generates a jpg wallpaper from an SVG-file according to the screen resolution of the visitor. The wallpaper consists of a circular gradient (rectangle) background and a path on top of it. How would you go about centering the path horizontally and vertically to the rectangle? Remember that the rectangle's size and proportions are not a constant. Should I separate the background and path to different svg files or is there an easy way to center paths? Maybe a framework?

Upvotes: 2

Views: 7824

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101956

This is easilly achieved by using nested <svg> elements and the preserveAspectRatio attribute. Put your background in the outer svg and your path in the inner one.

      <?xml version="1.0" encoding="UTF-8"?>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    
        <rect id="background" width="100%" height="100%" fill="grey"/>

        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="100%" height="100%">
          <g>
            <circle cx="15" cy="20" r="10" fill="yellow"/>
            <circle cx="12" cy="17" r="1.5" fill="black"/>
            <circle cx="18" cy="17" r="1.5" fill="black"/>
            <path d="M 10 23 A 8 13 0 0 0 20 23" stroke="black" stroke-width="2" fill="none"/>
          </g>
        </svg>
    
      </svg>

Run this snippet and try resizing the window.

To get this to work, all you need to ensure is that the viewBox attribute on the inner <svg> element is correctly set.

Upvotes: 7

Seidr
Seidr

Reputation: 4936

If you know the coordinates of the paths, you could take the total of the x/y coordinates and divide by the number of coordinates, this will give you the average position for the coordinate set. Then, offset each coordinate by the coordinates for half the width/height of the square, plus any offset, minus the difference between the center of the coordinate set and half the width/height of the square.

This should result in your coordinates being centered within the square, I think (it is rather early here, and I've just started my first coffee, so I could be wrong). This is of course assuming you know all the variables in play (the width/height of the square, any offset applied and the coordinates of the path).

Upvotes: 0

Related Questions