如何制作SVG RTL [英] How to make svg RTL

问题描述

我想制作svg RTL，这意味着我想将原点从左上角"更改为右上角"，这样当我说绘制路径M 0 0 L 100 100时，它会创建一条以top: 0, right: 0并转到top: 100, right: 100
我尝试了最常用的更改原点的解决方案，但没有一个像我希望的那样工作
我的代码:

I want to make svg RTL, meaning i want to change the origin from 'Top Left' to 'Top Right' in a way that when i say draw a path M 0 0 L 100 100, it creates a line that starts with top: 0, right: 0 and goes to top: 100, right: 100
I tried most common solution for changing origin but none of them work as i want it to
My code:

<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>

这是该代码的一个有效示例

推荐答案

翻译并缩放画布，尽管会警告任何文本也会显示RTL.

Translate and scale the canvas, though be warned any text will display RTL too.

<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>

这篇关于如何制作SVG RTL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！