代码之家 › 专栏 › 技术社区 › RTC222

SVG上的转换转换不会更改

transform svg

RTC222 · 技术社区 · 6 年前

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

编辑:如前所述,转换发生在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;
}

0 回复 | 直到 6 年前

Paul LeBeau 6 年前

你有两个变换在竞争。通过 #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>

推荐文章