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

所以

我正在做一个小的悬停动画。但是我在使用“transform:translate”时遇到了一些问题我希望我的字母从位置1移动到位置2，并设置一个“平移”和一个“过渡”，使它们显示为动画。好消息是，这些信件实际上到达了我希望它们到达的地方，它们的最终位置是正确的。问题在于，由于某种原因，悬停时动画会将其起始位置（位置1）从屏幕中心切换到左上角（原点）

我正在寻找一个纯css解决方案。我不在乎保留矩阵，如果你需要去掉它们，那就好了。但是，我确实希望它们是svg文本

我认为这个错误源于我没有完全理解svg坐标系。我试着去读一些东西，我搜索过，但我不明白。有svg和css经验的人能帮我吗

这是我的密码笔：

以下是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中的

transform

覆盖（替换）了元素中已有的

transform

属性

您需要将转换移出SVG，并使其成为CSS中元素的初始状态

text{stroke:Red；}
.abcdSVG svg#abcd-A{转换：translate（32.1255px，36.3169px）；}
.abcdSVG svg#abcd-B{转换：翻译（38.8467px，36.3169px）；}
.abcdSVG svg#abcd-C{转换：翻译（32.1313px，43.7246px）；}
.abcdSVG svg#abcd-D{转换：翻译（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:悬停#abcd-D
{
过渡时间：500ms；
-网络工具包转换：500毫秒；
过渡定时功能：易进易出；
-webkit转换计时功能：轻松输入输出；
}

为什么我的字母会跳到这里
⇩   悬停？

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