html - CSS 转换不会应用于页面加载和动态更新 inside svg

Question

我想将文本放置在 SVG 元素的左下角，并设法使用组和变换实现了这一点，但我注意到如果我垂直调整窗口大小它不会更新，而且它不会应用于页面加载，但如果我通过开发人员控制台添加转换属性。它们工作完美，直到我调整窗口大小。

这是某种错误还是我做错了什么？是否有另一种方法可以相对于左下角在 SVG 元素内定位文本并使其响应窗口大小调整？顺便说一句，我正在使用 chrome 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

SVG 中的变换不允许百分比。但是几何属性确实允许它们。所以最简单的方法是使用 <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/