CSSトランスフォームはページの読み込みには適用されず、動的にS内のSVG内にある

Question

SVG要素の左下にテキストを配置し、グループとトランスフォームを使用してテキストを配置したいと考えましたが、私のウィンドウを垂直にリサイズすると更新されます。また、ページのロードにも適用されませんが、開発者のコ​​ンソールからトランスフォームのプロパティを追加すると更新されます。私は窓のサイズを変更するまで、彼らは完全に動作します。

何らかのバグですか、何か間違っていますか？ SVG要素の内部にテキストを配置するもう1つの方法は、左下に相対的なもので、ウィンドウのサイズ変更に応答してください。私は途中でクロム61を使用しています。ここ

があまりにもjsfiddleするためのリンクです： 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

SVGsでの変換が割合を許可していません。しかし幾何学的属性はそれらを可能にする。したがって、これを行う最も簡単な方法は<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>

我々はテキストが一番下に座ってもらう方法は、最初はただ画面の上からそれを配置することです。次に、<use>要素を使用して、y="95%"に再配置します。それはちょうど100％より少し小さいので、ちょうど底の上に終わる。

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