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

接着 我使用以下方法制作了svg RTL：

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

但是，当我尝试调整浏览器窗口的大小时，转换不会应用，线原点也会更改！ 复制： 1-更改窗口大小可能使其更大，您可以看到线原点不在0上 2-在行上使用inspect元素，取消选中，然后在css类中检查转换，元素返回到其预期位置

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

您可能希望使用它来定义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>
  );
}

---

我明白了，所以使用viewBox解决了这个问题！谢谢，我可以设置viewBox width:100%height:100%吗？svg有width，height属性，可以随意使用：默认值是Auto我正在使用svg沿side div创建类似工作流图的东西，当我给svg一个viewBox时，它会使线条的厚度在调整大小时发生变化，而且它也破坏了程序的其余部分，因为我在整个过程中使用了绝对位置，我的选项是什么？使用一个viewBox，例如viewBox=0 0 200 100，为了保持相同的线宽，使用vector effect=non scaling-stroke@enxaneta您的解决方案意味着矢量效果=非缩放笔划修复了我的问题，谢谢！