Change the x-y coordinates of svg text with a medi

Question

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.

Answer 1

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>