Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center Path inside SVG

Tags:

html

path

xml

svg

Is it possible to center a path vertically within an SVG element?

This is one of the paths I need to center:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144"><path d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/></svg>
like image 267
Aaron Benjamin Avatar asked Feb 21 '15 01:02

Aaron Benjamin


People also ask

How do I center an SVG path?

You can change the svg viewBox attribute to center the path. This is especially useful if you have several paths in the svg, so you do not have to add a transform to each one. In your example that would be viewBox="0 15.674 144 144" , getting the y-offset the same way as in Pauls answer.

Why is SVG not centered?

It's a property of SVG elements, their node points (viewport and viewbox) are by standard, starting on the top-left and not on the center of the SVG element. So that's why whenever you try to center the vector, it doesn't fit right like images.

How do I put text inside an SVG path?

To create SVG text that follows a path you use a <textPath> element in combination with a path you define inside <defs> tags. To refer to the path you'll use an xlink:href attribute on the <textPath> . Note: SVG 2.0 is dropping the xlink: and will simply use href to refer to the path.


1 Answers

If you mean automatically, without intervention, then no. However you can add a transform to the path to centre it in the SVG.

The bounding box for the path is:

{
   x: 8.859999656677246,
   y: 40.347999572753906,
   width: 125.81500244140625,
   height: 94.6520004272461
}

The height of the document is 144, so the y should actually be at:

(144 - 94.652) / 2 = 24.674

So the y position of the path has to be adjusted by:

(24.674 - 40.348) = -15.674

So add the following attribute to the path element:

transform="translate(0, -15.674)"

Demo before and after:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 144 144" style="background-color: gray"><path d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 144 144" style="background-color: gray">
  
  <path transform="translate(0, -15.674)"
        d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/></svg>
like image 189
Paul LeBeau Avatar answered Sep 28 '22 06:09

Paul LeBeau