0

Yesterday I posted a question about how to move a subhead in an svg image at Change the x-y coordinates of svg text with a media query in either css or javascript?. The answer was to insert the section between the style tags below. I want to move a subhead down and left.

So I implemented this, but the subhead does not move. 

<div class="logo">

<style>
    @media(max-width: 320px){
        #subHead{
            transform: translateX(70px);
            transform: translateY(70px);
        }
    }
    @media(min-width: 1000px){
        #subHead{
            transform: translateX(0px);
                transform: translateY(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">Main Head</text>

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

</svg>

</div>

Why doesn’t the transform work as written at the 320 media query? This is an avg image.

EDIT: this question was marked as duplicate, but that post is about applying multiple transforms. This is about one transform, to move the X and Y coordinates. That can also be accomplished with translate(70px, 70px) which is a single statement. So my question is not about multiple transforms.

RTC222
  • 2,025
  • 1
  • 20
  • 53
  • That question is not an answer to my question. See the edit in my post above. – RTC222 Jul 14 '19 at 20:51
  • *This is about one transform* --> you are applying **two** transform in your code which is wrong and explained in the duplicate. You have to use **one** transform property. Besides that your code is working fine and applying the last transform as expected – Temani Afif Jul 14 '19 at 21:06
  • please try using `transform: translate(70px,70px);` and `transform: translateX(0px,0px)`. Also please read about [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) – enxaneta Jul 14 '19 at 21:24
  • Thanks to enxaneta and Temani Afif for the comments, but transform: translate(70px,70px); still makes no difference in the code above. – RTC222 Jul 14 '19 at 21:31
  • the transform will only be applied if the width is less than 320px ... reduce the browser width under this value and you will see – Temani Afif Jul 14 '19 at 21:34
  • I see two problems. The media queries above were copied from yesterday's answer, but he wrote max-width: when it should be min-width, but that doesn't solve it. Nor does lowering the min-width to zero, as suggested by @Temani Afif. The second problem is that there is a fade-in and I believe the transform may need to be applied after the fade-in is finished executing. I may need javascript to do that. – RTC222 Jul 14 '19 at 21:50
  • it's working fine even with min-width and 0 value: https://jsfiddle.net/w3n0tr69/ – Temani Afif Jul 14 '19 at 22:33

0 Answers0