動畫的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對齊

回答

相關問題