如何制作 svg RTL

【问题标题】：How to make svg RTL如何制作 svg RTL
【发布时间】：2020-02-23 00:36:10
【问题描述】：

我想制作svg RTL，这意味着我想将原点从“左上角”更改为“右上角”，这样当我说绘制路径M 0 0 L 100 100 时，它会创建一条以开头的线top: 0, right: 0 并转到 top: 100, right: 100
我尝试了最常见的更改来源的解决方案，但它们都没有像我想要的那样工作
我的代码：

<svg
  style={{ width: "100%", height: "100%", textAlign: "right" }}
  //preserveAspectRatio="xMaxYMin meet"
>
    <path stroke="green" strokeWidth="3" fill="none" d="M 0 0 L 100 100" />
</svg>

And here is a working example of the code

【问题讨论】：

标签： css reactjs svg

【解决方案1】：

平移和缩放画布，但警告任何文本也会显示 RTL。

<svg width="200" height="200">
      <g transform="translate(200, 0) scale(-1, 1)">
        <path stroke="green" strokeWidth="3" fill="none" d="M 0 0 L 100 100" />
      </g>
</svg>

【讨论】：

我的宽度和高度都是100%，它们必须是，我怎样才能用宽度和高度100%进行这种转换？
<g transform="translate(100%,100%) scale(-1, 1)"> 不起作用
我设法通过将css 作为模块导入并将其作为<g> 提供给className 来解决此问题，这样我就可以使用transform="translate(100%,0) scale(-1, 1)"
您可能只使用 viewBox。请注意，您不能使用带有 transform 作为属性的单位。