Transform translate on SVG does not change - svg

Question

I have an svg with two elements, a headline and a subhead. The subhead is nested below the headline. I need to reposition the subhead a small amount right and down from the head in a media query. I’m using the code shown below, but the transform doesn’t work. The transform is done with an inline style for a media query.
<div class="logo">
<style>
#media(min-width: 0px){
#subHead{
transform: translate(70px, 70px);
}
}
#media(min-width: 1000px){
#subHead{
transform: translate(0px,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">Abcdefg</text>
<text id="subHead" fill="url(#MyGradient)" x="24" y="33" width="33" height="24" class="tagline_class fadeIn animate_behind">subhead subhead subhd</text>
</svg>
</div>
I know that svg transforms are tricky, but this seems straightforward and I don’t know why it shouldn’t work. Thanks a lot for any ideas.
EDIT: as written, the translate happens before the fadeIn and the transform origin is greatly exaggerated. I applied a media query to the fadeIn class in an effort to get the transform to reposition the element, not the origin, but I still get the same behavior.
Here are the css classes:
.tagline_class {
font-family: robotoregular;
font-size: 7px;
fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/>;
}
#media (min-width: 320px) {
.tagline_class {
font-size: 9px; }
}
#media (min-width: 1080px) {
.tagline_class {
font-size: 7px; }
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
transform: translate(0px, 0px);
}
#media (min-width: 320px) {
.fadeIn {
transform: translate(470px, 470px); }
#media (min-width: 1080px) {
.fadeIn {
transform: translate(0px, 0px); }
padding-top:0% }
}
.animate_behind {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

Answer 1

You have two transforms competing. One that is applied via #subHead. And another via the fadeIn class. One will overwrite the other.
If you need both to apply, then apply one to the element, and one to a parent <g> element.
For example:
<g id="subHead">
<text fill="url(#MyGradient)" x="24" y="33" width="33" height="24"
class="tagline_class fadeIn animate_behind">subhead subhead subhd</text>
</g>