cssでSVGテキストを翻訳する - テキストボックスを開始位置ではなく起点から移動するのはなぜですか？

Question

だから、

私は少しホバーアニメーションをしています。しかし、私は "transform：translate"を使うことにいくつか問題があります。 私の手紙を翻訳1で場所1から場所2に移動し、アニメーションのように表示されるようにトランジションを設定します。良いニュースは、手紙が実際に私がそれらに欲しいところで終わることです、彼らの最終的な場所は正しいです。問題は、何らかの理由で、アニメーションが開始位置（位置1）を、画面の中心からホバー上の左上隅（原点）に切り替えることです。

私は純粋なCSSソリューションを探しています。行列を保持することには気をつけませんが、それらを削除する必要がある場合は問題ありません。しかし、私はそれらをテキストにすることを望む。

このミスは、私がsvgの座標系を完全に理解していないと思います。私は物事を読もうとしましたが、私は検索しましたが、私は理解しません。 svgとcssで経験豊富な人が私を助けることができますか？これは私のCSSで

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

：ここ

http://codepen.io/ihatecoding/pen/mPBWWo?editors=1100はHTMLです：

この

は私codepenある

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

なぜなら、あなたのCSSでtransform過書き込み（あなたの要素にすでにある属性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>