Question

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

我不想在两点之间形成90°的视觉效果，而是想绘制一个圆弧（四分之一圆）以使角度平滑。

如果使用弧形贝塞尔曲线，我将难以理解路径的形状-您能显示一个解决方案并解释做什么参数吗？

我还想知道绘图路径在计算方式上如何表现-仅使用M H V参数执行路径，遵守绘图弧或贝塞尔曲线吗？

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

示例：

到目前为止，我有：

// 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>

Answer 1

不同的人学习不同的方法，因此将其作为一般性提示来了解如何了解路径命令的工作原理：

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

在您的示例中，我认为主要问题是使用H和V命令。它们是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为逆时针方向）

复杂吗？ spec有一个很好的解释。

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>

垂直线之间以90°弧线绘制的svg绘制路径

1 个答案: