horizontal center svg path in svg include into div container

Question

Can you help me to understand why my path refuse to horizontally center into svg container or into div.

Ok if I try to align horizontally JUST the path without rect svg I can do that if svg container is 100% width. But if I want to add rect and just work into div width and height static, I never find solution for path center.

html :

<div id="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1200 1200">

        <rect id="background" width="100%" height="100%" fill="grey"/>

        <path id="path" xmlns="http://www.w3.org/2000/svg"
              d="M 201.68015,653.12212 C 189.21313,655.67886 177.65942,662.51955 166.63177,673.41648 C 155.59034,684.51344 91 L 310.26302 176.06855,451.96604 z etc................ "
              style="fill:#131516;fill-rule:evenodd;stroke:#131516;stroke-width:0.60229105" />

    </svg>
</div>

And css :

#svg-container
{
  height: 250px;
  width: 250px;
}
#path
{
    display: block;
    position: relative;
    left: 30%;
}

JSFiddle : https://jsfiddle.net/170jkfLr/2/#&togetherjs=w9w2vhjhEJ

Probably cos it follows the co-ordinates in the path data. You could consider [transforming the coordinates](https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace) or [nesting](http://stackoverflow.com/a/16890342/5496966). — AA2992, Sep 25 '16 at 16:11
Another lead [SVG positioning](http://stackoverflow.com/q/479591/5496966) — AA2992, Sep 25 '16 at 16:17

score 0 · Answer 1 · edited Feb 21 '18 at 15:21

Do this, example (twitter icon into the mid):

<center>
    <div style="width: 40px; height: 40px;">
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
            <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
                <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
                    <path
                        d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
                        />
                </svg>
            </use>
        </svg>
    </div>
</center>

horizontal center svg path in svg include into div container

1 Answers1