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之前，并且转换原点被大大夸大了。我将媒体查询应用于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>

SVG上的转换转换不会更改

1 个答案: