动画的SVG对齐

我对文本的SVG对齐有问题。
JSFiddle：https://jsfiddle.net/ajhzdhff/2/动画的SVG对齐

我希望“AN”从一开始就处于中心位置。

但是，如果我做的：

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

在一台计算机都完全的中心，但在另一台计算机上 - 没有。

来源

2016-07-10 Andrey N.

包裹你的SVG在p会促使人体内规则文本对齐：中心;可能在浏览器上工作。并改变你的pss来申请p.hover –

如果您不想依靠谨慎调整的边距来将SVG居中，那么通过进行一些更改，您可以将焦点留给浏览器。这意味着即使像<p>等其他元素的尺寸发生变化，居中仍将继续工作。

这是我会怎么做：

包住整个事情的<div>所以我们必须在东西向中心如果您在页面上的中心，那么你不需要这个。你可以使用<body>。
给出<div>的宽度足够整个SVG（340px）。如果您的原始容器（或<body>）比SVG宽，那么您也不需要这个容器。在SVG上设置preserveAspectRatio="xMinYMid slice。这使SVG内容与SVG视口保持对齐，而不是居中。 "slice"部分意味着它溢出了SVG的RHS，而不是缩小到合适的比例。
将SVG的height设置为72，以使其宽高比与viewBox匹配。这是需要的，所以下一步工作。
设置SVG的宽度，使其仅覆盖前两个字母。由于宽度与SVG的初始可见部分（“AN”）相匹配，因此它会自动居中在容器中。
悬停时。将SVG的宽度设置为全宽（340px）。浏览器将最新的更广泛的SVG。

查看下面的工作演示。我在这里简化了你的例子，使事情更清晰。

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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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>

来源

2016-07-10 09:35:44

这是一个非常好的答案！ –

动画的SVG对齐

回答

相关问题