SVG 上的转换翻译不会更改

Question

我有一个包含两个元素的svg，一个标题和一个副标题。 副标题嵌套在标题下方。 我需要在媒体查询中从头部右下重新定位少量副标题。 我正在使用下面显示的代码，但转换不起作用。 转换是使用媒体查询的内联样式完成的。

<div class="logo">
<style>
    @media(min-width: 0px){
        #subHead{
          transform: translate(70px, 70px);
        }
    }
    @media(min-width: 1000px){
        #subHead{
          transform: translate(0px,0px);
        }
    }
</style>
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%"  stop-color="rgb(71,164,71)"/>
        <stop offset="95%" stop-color="white"/>
    </linearGradient>
</defs>
<text x="0" y="25" class="logo_class three">Abcdefg</text>
<text id="subHead" fill="url(#MyGradient)" x="24" y="33" width="33" height="24" class="tagline_class fadeIn animate_behind">subhead subhead subhd</text>
</svg>
</div>

我知道 svg 转换很棘手，但这似乎很简单，我不知道为什么它不应该工作。 非常感谢您的任何想法。

编辑：正如所写，翻译发生在淡入之前，并且转换原点被大大夸大了。 我对 fadeIn 类应用了媒体查询，以使转换重新定位元素，而不是原点，但我仍然得到相同的行为。

以下是 css 类：

.tagline_class {
    font-family: robotoregular;
    font-size: 7px;
    fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/>; 
}
@media (min-width: 320px) {
  .tagline_class {
      font-size: 9px; }
}
@media (min-width: 1080px) {
  .tagline_class {
    font-size: 7px; }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
   transform: translate(0px, 0px);
}
@media (min-width: 320px) {
  .fadeIn {
    transform: translate(470px, 470px); }
@media (min-width: 1080px) {
  .fadeIn {
    transform: translate(0px, 0px); }
    padding-top:0% }
}
.animate_behind {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
     animation-delay: 0.8s;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

Answer 1

您有两个转换在竞争。一种通过#subHead .另一个通过fadeIn类。一个将覆盖另一个。

如果需要同时应用两者，请将一个应用于元素，另一个应用于父元素<g>元素。

例如：

<g id="subHead">
    <text fill="url(#MyGradient)" x="24" y="33" width="33" height="24"
          class="tagline_class fadeIn animate_behind">subhead subhead subhd</text>
</g>