Andrey N. Andrey N. - 4 months ago 13
CSS Question

Alignment of SVG of animation

I have a problem with alignment of SVG of the text.

JSFiddle: https://jsfiddle.net/ajhzdhff/2/

I want that "AN" was on the center from the very beginning.

But if I do:

.logo-svg {
margin-left: 16em;
transition-delay: 222ms;
}


On one computer all exactly on the center, but on another computer - no.

Answer

If you don't want to rely on carefully tweaked margins to center your SVG, then by making a few changes, you can leave the centering up to the browser. That will mean that the centering will continue to work even if other elements like the <p> change in size.

Here's how I would do it:

  1. Wrap the whole thing in a <div> so we have something to center in. If you are centering on the page, then you don't need this. You could just use the <body>.
  2. Give the <div> a width that's wide enough for the whole SVG (340px). If your original container (or <body>) is wider than the SVG, then you don't need this either.

  3. Set preserveAspectRatio="xMinYMid slice on the SVG. This makes the SVG content left aligned with the SVG viewport instead of being centered. The "slice" part means that it overflows off the RHS of the SVG instead of being scaled down to fit.

  4. Set the height of the SVG to 72 so that its width/height ratio matches the viewBox. This is needed so the next step works.

  5. Set the width of the SVG so that it covers only the first two letters. Since the width matches the initially-visible part of the SVG (the "AN"), it gets automatically centred in the container.

  6. On hover,. set the width of the SVG to the full width (340px). The browser will recentre the new, wider SVG.

See working demo below. I've simplified your example a bit here to make things clearer.

body {
  text-align: center;
}

svg {
  margin: 80px auto 0;
  width: 106px;
}

svg:hover {
  width: 340px;
}

.logo-type {
  opacity: 0;
}

svg:hover .logo-type {
  opacity: 1;
}

p {
  font-size: 13px;
  color: #777;
  background: #333;
  width: 15em;
  margin: 3em auto;
  padding: 0.75em 0;
}
<body>
  <div class="container">
    <svg class="logo-svg" viewBox="0 0 224.8 47.6" width="340px" height="72px"
         preserveAspectRatio="xMinYMid slice">
      <g>
        <g class="logo-type-group">
            <path class="logo-type logo-type-code-ninero" d="M178,0v38.2h-54.4L109.4,24c0,4.7,0,9.5,0,14.2c-12.8,0-25.6,0-38.3,0V29h28.3V24H70.9c0-8,0-16,0-24c21.7,0,43.3,0,65,0
		c0,3.3,0,6.6,0,10c-4.7,4.6-9.3,9.3-14,13.9c1.7,1.7,3.4,3.4,5.1,5.1c13.6,0,27.3,0,40.9,0c0-6.3,0-12.7,0-19h-19.1v17.2h-9.3
		l0-27.2L178,0z M109.4,23.3c4.4-4.5,8.9-8.9,13.3-13.4h-13.3C109.3,14.4,109.4,18.8,109.4,23.3z M80.4,14.4c6.3,0,12.6,0,19,0
		c0-1.5,0-2.9,0-4.4h-19V14.4z"></path>
            <path class="logo-type logo-type-code-s" d="M224.8,0c-3.2,3.2-6.5,6.5-9.7,9.7c-7.2,0-14.4,0-21.6,0c-1.6,1.6-3.1,3.1-4.7,4.7c9.7,0,19.3,0,29,0c0,4.5,0,9,0,13.5
		c-3.4,3.4-6.9,6.9-10.3,10.3c-9.3,0-18.6,0-27.9,0c0-3.1,0-6.1,0-9.2c7.7,0,15.4,0,23.1,0c1.7-1.7,3.4-3.4,5.1-5.1
		c-9.4,0-18.8,0-28.3,0c0-5,0-9.9,0-14.9c3-3,6-6,9-9C200.6,0,212.7,0,224.8,0z"></path>
        </g>
      </g>

      <path class="logo-an" d="M69.7,0c0,15.1,0,30.2,0,45.3c-10.3-10.3-20.7-20.7-31-31c0,7.9,0,15.8,0,23.8c-3.2,0-6.5,0-9.7,0c0-9.4,0-18.8,0-28.2
		c-6.4,0-12.8,0-19.3,0c0,4.4,0,8.7,0,13.1c3-3,5.9-5.9,8.9-8.9c2.5,2.5,5,5,7.5,7.5c-8.7,8.7-17.3,17.3-26,26C0,31.7,0,15.9,0,0
		c12.8,0,38.5,0,38.5,0c7.1,7.1,14.2,14.2,21.3,21.3c0-7.1,0-14.2,0-21.3C63.1,0,66.4,0,69.7,0z"></path>
    </svg>

    <p class="hover">***</p>
  </div>
</body>