CODEWITHSUNDEEP
svgtransform
RTC222
RTC222

Reputation: 2323

Transform translate on SVG does not change

I have an svg with two elements, a headline and a subhead. The subhead is nested below the headline. I need to reposition the subhead a small amount right and down from the head in a media query. I’m using the code shown below, but the transform doesn’t work. The transform is done with an inline style for a media query. 

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

I know that svg transforms are tricky, but this seems straightforward and I don’t know why it shouldn’t work. Thanks a lot for any ideas.

EDIT: as written, the translate happens before the fadeIn and the transform origin is greatly exaggerated. I applied a media query to the fadeIn class in an effort to get the transform to reposition the element, not the origin, but I still get the same behavior.

Here are the css classes:

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

Upvotes: 1

Views: 1439

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

You have two transforms competing. One that is applied via #subHead. And another via the fadeIn class. One will overwrite the other.

If you need both to apply, then apply one to the element, and one to a parent <g> element.

For example:

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

Upvotes: 3

Related Questions