javascript - 如何使用 D3 从右到左绘制 SVG 多段线

Question

我有一条从左到右 (LTR) 模式的 SVG 折线，如下所示:

<svg width="50" height="50">
  <polyline fill="none" stroke="blue" stroke-width="2"
    points="05,30
            15,30
            15,20
            25,20
            25,10
            35,10" />
 </svg>

如何在从右到左 (RTL) 模式下绘制同一条线？我应该使用 transform 还是 translate 属性？

Answer 1

我的问题的解决方案是简单地重新绘制 SVG 的镜像。这可以通过使用如下的变换、平移和缩放属性来完成:

transform = "translate($width, 0) scale(-1,1)"

此处，scale() 函数用作镜像函数，沿 x 轴或 y 轴缩放 -1。

代码:

<svg width="50" height="50">
  <polyline fill="none" stroke="blue" stroke-width="2"
    points="05,30
            15,30
            15,20
            25,20
            25,10
            35,10" transform="translate(50,0) scale(-1, 1)"/>
 </svg>

注意:正如 Robert 在评论中提到的，全局方向属性仅适用于文本元素，不适用于图形元素。因此，在我的 js 文件中，我检查方向是否为 rtl，如果为真，则显示镜像的 svg。

fiddle 的链接在这里:https://jsfiddle.net/ShellZero/vzaoysw7/5/

以下两个链接帮助我解决了我的问题:
[1] https://sarasoueidan.com/blog/svg-transformations/
[2] https://www.w3.org/TR/SVG/coords.html#Introduction