窗口调整大小时不会再次触发变换

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- 使用inspect element就行，取消勾选再勾选css类中的“transform”，元素返回到它的预期位置

通过执行我描述的操作，很明显转换不会应用于调整大小。

Answer 1

您可能希望使用viewBox 来定义 SVG 视口的位置和尺寸：

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>
  );
}