Les transformations CSS ne s'appliquent pas au chargement de la page et se mettent à jour dynamiquement <g> à l'intérieur svg

Question

Je voulais positionner le texte en bas à gauche d'un élément SVG, et réussi à y parvenir en utilisant des groupes et des transformations, mais j'ai remarqué qu'il ne sera pas mise à jour si je redimensionne verticalement ma fenêtre, et aussi cela ne s'appliquera pas au chargement de la page, mais si j'ajoute les propriétés de la transformation via la console du développeur. ils fonctionnent parfaitement, jusqu'à ce que je redimensionne la fenêtre.

Est-ce une sorte de bogue ou je fais quelque chose de mal? Existe-t-il un autre moyen de positionner le texte à l'intérieur de l'élément SVG par rapport à la partie inférieure gauche et de le garder réactif au redimensionnement de la fenêtre? J'utilise le chrome 61 en passant.

est ici un lien vers jsFiddle aussi: https://jsfiddle.net/eow1c4o4/

*,*:before,*:after { 
 
    box-sizing: border-box; 
 
} 
 
body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 300vh 
 
} 
 
tspan { 
 
    font-weight: 900; 
 
    font-size: 50px; 
 
    dominant-baseline: hanging; 
 
}

<svg width="100%" height="100vh"> 
 
    <defs> 
 
    <mask id="mask" maskUnits="userSpaceOnUse"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <g style="transform: translate(0, 100%);"> 
 
     <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> 
 
     <g style="transform: translate(50px, -100%);"> 
 
      <text x="0" y="0" text-anchor="start" font-family="Roboto"> 
 
      <tspan x="0" dy="0">SOME</tspan> 
 
      <tspan x="0" dy="0.81em">ABSOLUTELY</tspan> 
 
      <tspan x="0" dy="0.81em">RANDOM TEXT</tspan> 
 
      </text> 
 
     </g> 
 
     </g> 
 
    </mask> 
 
    </defs> 
 

 
    <rect width="100%" height="100%" fill="#dedede" fill-rule="evenodd" mask="url(#mask)"></rect> 
 
</svg>

Answer 1

Transforme en SVGs ne permettent pas de pourcentages. Mais les attributs géométriques les autorisent. Donc, la façon la plus simple de le faire est avec un élément <use>.

*,*:before,*:after { 
 
    box-sizing: border-box; 
 
} 
 
body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 300vh 
 
} 
 
tspan { 
 
    font-weight: 900; 
 
    font-size: 50px; 
 
}

<svg width="100%" height="100vh"> 
 
    <defs> 
 
    <text id="mytext" x="0" y="-80" text-anchor="start" font-family="Roboto"> 
 
     <tspan x="0" dy="0">SOME</tspan> 
 
     <tspan x="0" dy="0.81em">ABSOLUTELY</tspan> 
 
     <tspan x="0" dy="0.81em">RANDOM TEXT</tspan> 
 
    </text> 
 
    <mask id="mask" maskUnits="userSpaceOnUse"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <use xlink:href="#mytext" x="5%" y="95%" fill="black"/> 
 
    </mask> 
 
    </defs> 
 

 
    <rect width="100%" height="100%" fill="#dedede" fill-rule="evenodd" mask="url(#mask)"></rect> 
 
</svg>

La façon dont nous obtenons le texte s'asseoir au fond, est de positionner initialement juste à côté de la partie supérieure de l'écran. Ensuite, nous utilisons un élément <use> pour le repositionner à y="95%". C'est juste un peu moins de 100%, donc ça finit juste au-dessus du fond.

https://jsfiddle.net/eow1c4o4/1/