html - 在 svg 中绘制路径，垂直线之间有 90° 弧

Question

我想在空间中的 2 点之间绘制两条垂直线段。

而不是两点之间90°的视觉效果，我想画一个圆弧（四分之一圆）来视觉上平滑角度。

如果使用弧形贝塞尔曲线，我很难理解路径是如何形成的——你能展示一个解决方案并解释什么参数的作用吗？

我还想知道绘制路径在计算上的表现如何——它们只使用 MHV 参数执行路径，尊重绘制弧线或贝塞尔曲线？

我阅读了指南，但还没有达到我想要的结果。

---

例子：

到目前为止，我有：

// draw two perpendicular segments between points (0,0) and (100, 100)
<svg viewBox="0 0 200 200">
        <path 
              d="
                M 0,0
                H 100 
                V 100
                 "
              />
    </svg> 

这在视觉上看起来像是由点 A(0,0) 和 C(100,100) 之间的两条垂直线段组成的虚线，它们在 B(100,0) 处相交。

现在，我想在 A 点和 C 点之间绘制两条垂直线段，并放置一个四分之一圆弧而不是 B 点，以使这两条线段形成连续线的方式定向- 而不是“折线”（不是英语母语，我希望你明白我所说的“断线”是什么意思）。

这是我想出的最巧妙的解决方案，但仍然无法正常工作：

// attempt to draw a " curve " between 2 perpendicular segments > failed

<svg viewBox="0 0 200 200">
        <path 
              d="
                M 0,80
                H 80
                Q 100,100 100, 100
                V 200
                 "
              />
    </svg> 

标签： htmlsvg

Answer 1

不同的人学习不同的方式，所以把它作为一些一般提示如何找出路径命令是如何工作的：

• 主要来源显然是规范
• 使用可视化编辑器绘制路径，并检查生成的代码。Inkscape有一个方便的内置 XML 编辑器，可让您并排查看渲染路径及其定义。

在您的示例中，我认为主要问题是使用HandV命令。它们是L命令的简写，其中 x 或 y 坐标被忽略并从最后一个控制点复制。这两条路径是等价的：

M 0,80   L 90,80
M 0,80   H 90

就像这些

M 100,90 L 100,200
M 100,90 V     200

现在，用一条直线段连接这两者：

M 0,80   L 90,80   L 100,90   L 100,200

(90,80)现在，您必须在曲线之间交换直线(100,90)。它可能是二次贝塞尔曲线（第二行是简写形式）：

M 0,80   L 90,80   Q 100,80 100,90   L 100,200
M 0,80   H 90      Q 100,80 100,90   V 200

曲线开始于(90,80)，中间控制点位于(100,80)，结束于(100,90)。

或者你可以使用一个真正的弧：

M 0,80   L 90,80   A 10 10 0 0 1 100,90   L 100,200
M 0,80   H 90      A 10 10 0 0 1 100,90   V 200

起点和终点保持不变。该命令的其余部分有点复杂：

• 前两个数字是弧的水平和垂直半径
• 第三个数字将旋转这两个轴，0 表示不旋转
• 第四位的 0 表示弧线绕椭圆的角度小于 180 度（1 表示 > 180）
• 第五位的 1 表示弧顺时针方向运行（1 表示逆时针方向）

复杂？该规范有一个很好的解释它。

path {
    fill:none;
    stroke:black;
}

<svg viewBox="0 0 300 200">
    <path d="M   0,80   L  90,80   Q 100,80 100,90        L 100,200" />
    <path d="M 100,80   L 190,80   A 10 10 0 0 1 200,90   L 200,200" />
</svg>