用CSS或JavaScript中的媒体查询改变SVG文本的X-Y坐标?

您还可以在css中使用svg元素的id:

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