更改CSS或javascript中的媒体查询的svg文本的x-y坐标? [英] Change the x-y coordinates of svg text with a media query in either css or javascript?

问题描述

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

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>

我知道我可以使用javascript更改svg元素，但是如果可以使用CSS会更容易.

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

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

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

如果没有，我可以使用以下javascript:

If not, I can use this javascript:

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

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

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.

总结一下，如何使用css或javascript中的媒体查询来更改svg文本的x-y坐标.

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

推荐答案

您也可以在CSS中使用svg元素的ID:

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>

这篇关于更改CSS或javascript中的媒体查询的svg文本的x-y坐标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！