SVG 上的转换转换不会改变答案

【问题标题】：Transform translate on SVG does not changeSVG 上的转换转换不会改变
【发布时间】：2019-07-18 21:59:46
【问题描述】：

我有一个包含两个元素的 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;
}

【问题讨论】：

问题是什么？改造对我有用。
我现在看到的是，变换原点从页面的下方开始，然后逐渐向上进入位置，这是对大屏幕上性能的极大夸大。这告诉我转换正在工作，但它在淡入之前应用了转换 - 请注意淡入类。我需要将其重新定位在主头部下方；我不需要夸大变换原点。

标签： svg transform

【解决方案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>

【讨论】：

谢谢，@Paul LeBeau。你的想法行得通。该元素现在正确定位。这是g标签。再次感谢。