如何在SVG中将行转换为路径

Question

我在svg中有一行

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="100" x2="100" y2="20"
      stroke-width="2" stroke="black"/>
</svg>

如何将其转换为路径？

Answer 1

我不确定是否可以使用在线工具执行此操作，但是如果您知道路径“ d”属性的含义是什么，则可以手动进行操作。

M：“移至” L：“行至” C：“立方贝塞尔曲线” 问：“二次贝塞尔曲线” Z：“闭合路径”

对于行，您只需要“ M”和“ L”。

因此，要转换此行：

<line x1="20" y1="100" x2="100" y2="20"/>

等效路径为：

<path d="M20 100, L100 20" />

或d =“ M x1 y1， L x2 y2”