在 css 中翻译 SVG 文本 - 为什么我的文本框从原点而不是它们的起始位置移动？

Question

所以，

我正在制作一个悬停动画。但是我在使用 "transform: translate" 时遇到了一些问题。 我希望我的字母从位置 1 移动到位置 2，带有翻译和过渡设置，以便它们显示为动画。好消息是这些字母实际上在我想要的位置结束，它们的最终位置是正确的。问题是由于某种原因，动画在悬停时将其起始位置（位置 1）从屏幕中心切换到左上角（原点）。

我正在寻找一个纯粹的 css 解决方案。 我不关心保留矩阵，如果您需要摆脱它们，那很好。不过，我确实希望它们是 svg 文本。

我认为这个错误是因为我没有完全理解svg坐标系。我试过阅读有关的东西，我搜索过，但我不明白。在 svg 和 css 方面有经验的人可以帮助我吗？

这是我的代码笔：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

这是因为您的 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"
            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="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" 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>

在 css 中翻译 SVG 文本 - 为什么我的文本框从原点而不是它们的起始位置移动？

Translating SVG text in css - why do my text boxes move from the origin instead of their starting location?

css

svg

transition

transform

translate