是否使用css或javascript中的媒体查询更改svg文本的x-y坐标？

我在我的主页上嵌入了svg文本。有一个主头和一个subHead (见下文)。我想在媒体查询中更改使用tagline_class的subHead的x-y坐标。

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

我知道我可以用javascript改变svg元素，但如果我能用css就更容易了。

在媒体查询中，我可以仅使用css来更改subHead (tagline_class)的x-y坐标吗？

如果没有，我可以使用这个javascript：

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

但我不清楚是从媒体查询中调用javascript，还是从javascript代码中使用的媒体查询中调用。我也不知道使用什么事件来更改svg坐标。

总之，如何在css或javascript中使用媒体查询来更改svg文本的x-y坐标。

转载请注明出处:http://www.jubohx.com/article/20230429/1257906.html