在CSS中翻譯SVG文本 - 爲什麼我的文本框從原點移動而不是其起始位置？

Question

所以，

我有一個懸停動畫我正在做。但我在使用「transform：translate」時遇到了一些問題。 我希望我的信件從位置1移動到位置2，並進行翻譯並設置過渡集，以使它們看起來具有動畫效果。好消息是，這些信件實際上最終在我想要的地方，他們的最終位置是正確的。問題在於，由於某些原因，動畫在懸停時將其起始位置（位置1）從屏幕中心切換到左上角（原點）。

我正在尋找一個純粹的css解決方案。我不關心保持矩陣，如果你需要擺脫它們，那很好。然而，我確實希望他們成爲svg文字。

我覺得這個錯誤來自於我不完全理解svg座標系。我嘗試閱讀有關的內容，但我不明白。有人在svg和css經驗豐富的人能幫我嗎？

這是我codepen：http://codepen.io/ihatecoding/pen/mPBWWo?editors=1100

下面是HTML：

<a href="abcd.html" class="abcdSVG"> 
    <div> 
     <svg version="1.1" 
      id="Layer_1" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="76.828px" 
      height="74.758px" viewBox="0 0 76.828 74.758" enable-background="new 0 0 76.828 74.758" xml:space="preserve"> 
    <text id="abcd-A" transform="matrix(1 0 0 1 32.1255 36.3169)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">A</text> 
       <text id="abcd-B" transform="matrix(1 0 0 1 38.8467 36.3169)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">B</text> 
       <text id="abcd-C" transform="matrix(1 0 0 1 32.1313 43.7246)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">C</text> 
       <text id="abcd-D" transform="matrix(1 0 0 1 37.4658 43.7246)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">D</text> 
    </svg> 
    </div> 
</a> 

這是我的CSS：

text{stroke:Red;} 
.abcdSVG svg:hover #abcd-A{transform: translate(18px, 28px);} 
.abcdSVG svg:hover #abcd-B{transform: translate(46px, 28px);} 
.abcdSVG svg:hover #abcd-C{transform: translate(18px, 50px);} 
.abcdSVG svg:hover #abcd-D{transform: translate(46px, 50px);} 

.abcdSVG svg #abcd-A, 
.abcdSVG svg #abcd-B, 
.abcdSVG svg #abcd-C, 
.abcdSVG svg #abcd-D, 
.abcdSVG svg:hover #abcd-A, 
.abcdSVG svg:hover #abcd-B, 
.abcdSVG svg:hover #abcd-C, 
.abcdSVG svg:hover #abcd-D 

{ 
    transition: 500ms; 
    transition-timing-function: ease-in-out; 
    -webkit-transition: 500ms; 
    -webkit-transition-timing-function: ease-in-out; 
    } 

Answer 1

這是因爲transform在你的CSS過度寫入（替換）已經在元素中的transform屬性。

您需要將變換移出SVG，並使它們成爲CSS中元素的初始狀態。

text{stroke:Red;} 
 

 
.abcdSVG svg #abcd-A{transform: translate(32.1255px, 36.3169px);} 
 
.abcdSVG svg #abcd-B{transform: translate(38.8467px, 36.3169px);} 
 
.abcdSVG svg #abcd-C{transform: translate(32.1313px, 43.7246px);} 
 
.abcdSVG svg #abcd-D{transform: translate(37.4658px, 43.7246px);} 
 

 
.abcdSVG svg:hover #abcd-A{transform: translate(18px, 28px);} 
 
.abcdSVG svg:hover #abcd-B{transform: translate(46px, 28px);} 
 
.abcdSVG svg:hover #abcd-C{transform: translate(18px, 50px);} 
 
.abcdSVG svg:hover #abcd-D{transform: translate(46px, 50px);} 
 

 
.abcdSVG svg #abcd-A, 
 
.abcdSVG svg #abcd-B, 
 
.abcdSVG svg #abcd-C, 
 
.abcdSVG svg #abcd-D, 
 
.abcdSVG svg:hover #abcd-A, 
 
.abcdSVG svg:hover #abcd-B, 
 
.abcdSVG svg:hover #abcd-C, 
 
.abcdSVG svg:hover #abcd-D 
 
{ 
 
    transition: 500ms; 
 
    -webkit-transition: 500ms; 
 

 
    transition-timing-function: ease-in-out; 
 
    -webkit-transition-timing-function: ease-in-out; 
 
}

<span> why do my letters jump here <br>⇩ on hover? 
 
<a href="abcd.html" class="abcdSVG"> 
 
    <div> 
 
     <svg version="1.1" 
 
      \t id="Layer_1" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" 
 
      \t xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="76.828px" 
 
      \t height="74.758px" viewBox="0 0 76.828 74.758" enable-background="new 0 0 76.828 74.758" xml:space="preserve"> 
 
       <text id="abcd-A" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">A</text> 
 
       <text id="abcd-B" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">B</text> 
 
       <text id="abcd-C" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">C</text> 
 
       <text id="abcd-D" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">D</text> 
 
    </svg> 
 
    </div> 
 
</a>