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）模式下绘制同一行？我应该使用转换或翻译属性吗？

Answer 1

我的问题的解决方案是简单地重新绘制SVG的镜像。这可以通过使用transform，translate和scale属性来完成，如下所示：

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，如果它是真的。

小提琴的链接在这里：https://jsfiddle.net/ShellZero/vzaoysw7/5/

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

如何使用D3在右向左方向绘制SVG折线

1 个答案: