0

I have svg text embedded on my home page. There is Main Head and a subHead (see below). I want to change the x-y coordinates of the subHead, which uses tagline_class, in a media query. 

<div class="logo">

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

I know I can change svg elements with javascript, but it would be easier if I could use css.

Can I change the x-y coordinates of subHead (tagline_class) using only css, in a media query?

If not, I can use this javascript: 

document.getElementById("jqx-chart-axis-text").setAttribute("x", "10");

but I'm not clear on whether the javascript should be called from a media query, or the media query used in the javascript code. I also don't know what event to use to change the svg coordinates.

To summarize, how to change the x-y coordinates of svg text using a media query in either css or javascript.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
RTC222
  • 2,025
  • 1
  • 20
  • 53
  • why you don't simply consider the text as HTML? – Temani Afif Jul 13 '19 at 23:19
  • I'm not sure what you mean. It's svg text. – RTC222 Jul 13 '19 at 23:20
  • you make it `

    ` or `

    ` for example (instead of text element inside SVG) and you can easily handle it using media query

     – Temani Afif Jul 13 '19 at 23:21
  • Except that it has a linear gradient, which I can't replicate in text. SVG works best for this element. – RTC222 Jul 13 '19 at 23:22
  • you can replicate it using CSS (you will probably have less support) but even if you cannot you can at least put the first text outside where you don't have any gradient and have only the second text as the only element of the SVG and adjust the SVG – Temani Afif Jul 13 '19 at 23:24
  • Interesting idea, but I know I can change it using javascript. I just have to work out how. Easiest would be css, of course, but your solution involves unknown issues because it's positioned nested within the main head and I think that would be difficult with a non-svg element. – RTC222 Jul 13 '19 at 23:28
  • not really difficult, you do this: https://jsfiddle.net/jayv2Ltn/1/ and you can easily handle element with CSS. Or you do all with pure CSS: https://jsfiddle.net/jayv2Ltn/2/ – Temani Afif Jul 13 '19 at 23:35

1 Answers1

2

you can use the id of svg element also in css:

<div class="logo">
<style>
    @media(max-width: 500px){
        #subHead{
            transform: translateX(-20px);
        }
    }
    @media(min-width: 1000px){
        #subHead{
            transform: translateX(20px);
        }
    }
</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>
Patrick Zamarian
  • 266
  • 1
  • 7
  • Good comment, @ZamarianPatrick - I was just looking at transforms and it looks like the fastest and easiest solution. I'll let you know what happens. – RTC222 Jul 13 '19 at 23:46