Change The X-y Coordinates Of Svg Text With A Media Query In Either Css Or Javascript?

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

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