如何将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>

如何将其转换为路径？

- user7331530

---

你需要的是 M 和 L。请访问 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d 了解更多相关信息。 - Kaiido

谢谢！<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <path d="M20 100 L100 20" stroke-width="2" stroke="black"/> </svg> - user7331530

Answer 1

我不确定有没有在线工具可以做到这一点，但是如果您知道路径“d”属性的内容，您可以手动完成它。

M: “移动到” L: “直线到” C: “三次贝塞尔曲线到” Q: “二次贝塞尔曲线到” Z: “闭合路径”

对于直线，您只需要使用“M”和“L”。

因此，要转换此行：

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

路径的等效形式将是：

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

或者，d="Mx1 y1, Lx2 y2"

- Marek Suchanski

---

这应该实际转换为<path d="M 20 100 L 100 20" />。有关命令和语法的更多信息在此处：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths - Spaig87

请注意，这不考虑线条的stroke-width属性！ - Student