Question

昨天我在Change the x-y coordinates of svg text with a media query in either css or javascript?上发布了一个有关如何在svg图像中移动副标题的问题。答案是在下面的样式标签之间插入该部分。我想左右移动小标题。

因此我实现了这一点，但是副标题没有移动。

<div class="logo">

<style>
    @media(max-width: 320px){
        #subHead{
            transform: translateX(70px);
            transform: translateY(70px);
        }
    }
    @media(min-width: 1000px){
        #subHead{
            transform: translateX(0px);
                transform: translateY(0px);
        }
    }
</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>

为什么转换不按320媒体查询的要求工作？这是一个平均图像。

编辑：此问题被标记为重复，但是该帖子是关于应用多个转换的。这大约是一次转换，以移动X和Y坐标。这也可以通过单个语句translate（70px，70px）来完成。所以我的问题不是关于多重转换。

在svg文本元素上进行转换不会移动该元素

0 个答案: