使用SVG路径生成弧

时间:2015-05-29 15:55:16

标签: html svg

使用以下内容,我从指定的起点和终点得到一个完美的半圆;

<path 
    d="M100,100 L100,200
        A50,50 0 1, 1 100,100
            " 
    stroke="Black" stroke-width="2" fill="none" />

如果圆圈完成,它将具有x和y半径50(指定为路径A部分的第一个参数),以弧起点100,200和终点100,100为中心。

如果我现在更新以下路径;

<path 
    d="M100,100 L100,150
        A50,50 0 1, 1 100,100
            " 
    stroke="Black" stroke-width="2" fill="none" />

我看到圈子溢出&#39;在线的左边。

假设:因为弧的起点和终点之间的距离小于所需的100px(直径),所以计算圆的中心点远离弧的起点和终点之间绘制的线,并且进一步与这两点等距。因此,指定的50半径作为最小半径,不会按比例缩小&#39;如果起点和终点之间的距离小于2 *半径。

如果我现在更新以下路径;

<path 
    d="M100,100 L100,400
        A50,50 0 1, 1 100,100
            " 
    stroke="Black" stroke-width="2" fill="none" />

如果圆弧是圆的一部分,则再次(根据第一个圆弧设置)它以线为中心但这次x和y半径已经放大以适应两者之间的额外距离定义的起点和终点。

假设:虽然50px半径作为最小值,但它不作为最大值,并且如果起点和终点之间的宽度> 1,则实际上将缩放。 100(直径)。

我的任何假设是否正确还是我没有?

0 个答案:

没有答案