css - 调整窗口大小时不会再次触发转换

Question

正在关注 How to make svg RTL
我使用以下方法制作了我的 svg RTL:

transform: translate(100%, 0) scale(-1, 1);  

但是当我尝试调整浏览器窗口的大小时，transform 没有应用并且线原点发生了变化!
Here is an example showing this issue
复制:
1- 改变窗口大小(可能变大)，你可以看到线原点不在 0 0
2-在线上使用检查元素，取消选中然后选中css类中的“转换”，元素返回到其预期位置

通过执行我所描述的操作，很明显变换未应用于调整大小。

Answer 1

您可能想使用 viewBox定义 SVG 视口(viewport)的位置和尺寸:

function App() {
  return (
    <div className="App">
      <div>
        Please resize the browser window, as you can see the line doesnt remain
        on 0, 0
      </div>
      <svg viewBox="0 0 200 200" vector-effect="non-scaling-stroke">
        <g className="svgRTL">
          <path
            stroke="green"
            strokeWidth="3"
            fill="none"
            d="M 0 0 L 100 100"
          />
        </g>
      </svg>
    </div>
  );
}