Übersetzen von SVG-Text in CSS - warum bewegen sich meine Textfelder vom Ursprung anstatt von ihrem Startort?

Question

Ich habe eine kleine Hover-Animation, die ich mache. Aber ich habe einige Probleme mit "transform: translate". Ich möchte, dass sich meine Buchstaben von Position 1 zu Position 2 bewegen, mit einer Übersetzung und einem Übergang, so dass sie animiert erscheinen. Die gute Nachricht ist, dass die Briefe tatsächlich dort enden, wo ich sie haben möchte, ihr endgültiger Ort ist richtig. Das Problem ist, dass die Animation aus irgendeinem Grund ihren Startort (Position 1) von der Mitte des Bildschirms in die obere linke Ecke (den Ursprung) beim Schweben umschaltet.

Ich bin auf der Suche nach einer reinen CSS-Lösung. Ich kümmere mich nicht darum, die Matrizen zu behalten, wenn Sie sie loswerden müssen, ist das in Ordnung. Ich möchte aber, dass sie Svg-Text sind.

Ich denke, dieser Fehler kommt von mir nicht vollständig das Svg-Koordinatensystem zu verstehen. Ich habe versucht, über Dinge zu lesen, ich habe gesucht, aber ich verstehe nicht. Kann jemand, der Erfahrung in Svg und CSS hat, mir helfen?

Das ist mein codepen: http://codepen.io/ihatecoding/pen/mPBWWo?editors=1100

Hier ist der HTML ist:

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

Das ist mein CSS ist:

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

Es ist, weil die transform in Ihrem CSS überschreibt (ersetzt) ​​die transform Attribute, die bereits in Ihren Elementen sind.

Sie müssen die Transformationen aus Ihrem SVG verschieben und sie zum Ausgangszustand für die Elemente im CSS machen.

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>