SVG metnini css olarak çevirme - metin kutularım neden başlangıç ​​konumlarının yerine kökenden taşınıyor?

Question

Yani,

Yaptığım küçük bir canlandırma animasyonum var. Ama "convert: translate" kullanarak bazı sorunlar yaşıyorum. Mektuplarımın konum 1'den 2 konumuna, bir çevirme ve geçiş ayarına sahip olmasını istiyorum, böylece animasyonlu görünüyorlar. İyi haber şu ki mektuplar aslında onları istediğim yere kadar bitiriyor, son konumları doğru. Sorun, bir nedenden ötürü, animasyonun başlangıç ​​konumunu (konum 1) ekranın ortasından vurgunun üzerine sol üst köşeye (orijin) geçirmesidir.

Saf bir css çözümü arıyorum. Matrisleri saklamayı umursamıyorum, eğer onlardan kurtulmanız gerekiyorsa, bu iyidir. Ancak, bunların svg metin olmasını istiyorum.

Sanırım bu hata, svg koordinat sistemini tam olarak anlayamadığımdan geliyor. Bir şeyleri okumayı denedim, aradım ama anlamıyorum. Svg ve css'de deneyimli biri bana yardımcı olabilir mi? Bu Benim 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> 

: Burada

http://codepen.io/ihatecoding/pen/mPBWWo?editors=1100 HTML:

Bu

benim codepen olduğunu

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

O çünkü CSS'nizde transform aşırı yazıyor (öğelerinizde zaten bulunan transform niteliklerini değiştirir.

Dönüştürmeleri SVG'nizden dışarı taşımanız ve CSS'deki öğeler için başlangıç ​​durumuna getirmeniz gerekir.

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>