如何计算 SVG 中的 d 路径？答案

【问题标题】：How to calculate a d path in SVG?如何计算 SVG 中的 d 路径？
【发布时间】：2019-05-04 21:26:01
【问题描述】：

正在尝试设置路径 svg 角。

但没有成功将底角设置为圆角，

路径元素代码：

          path = 'M ' + points[0][indexX] + ',' + (points[0][indexY] - 7) + ' ' +
            'L' + points[1][indexX] + ',' + (points[1][indexY] + bar_radius) + ' ' +
            'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX] + bar_radius) + ',' + points[1][indexY] + ' ' +
            'L' + (points[2][indexX] - bar_radius) + ',' + points[2][indexY] + ' ' +
            'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + points[2][indexX] + ',' + (points[2][indexY] + bar_radius) + ' ' +
            'L' + points[3][indexX] + ',' + (points[3][indexY] - 7) + ' ' +
            'z';

d="M 44.2,291 L44.2,261.42857142857144 Q44.2,259.42857142857144 46.2,259.42857142857144 L57.800000000000004,259.42857142857144 Q59.800000000000004,259.42857142857144 59.800000000000004,261.42857142857144 L59.800000000000004,291 z"

【问题讨论】：

标签： javascript css d3.js svg c3.js

【解决方案1】：

您似乎正试图在这些条形的底部实际绘制曲线。除非您有特定的理由想要这样做，否则这可能不是您想要获得所需外观的方式。

事实证明，您实际上可以为矩形对象指定角半径。当以这种方式接近时，您的任务变得完全微不足道。您不再指定每个顶点，而只是指定位置、大小和角半径。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 40 40" >
    <rect
       style="opacity:1;fill:#0000ff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect4189"
       width="15.5"
       height="31.5"
       x="0"
       y="0"
       rx="2"
       ry="2" />
</svg>

【讨论】：

【解决方案2】：

您没有提供太多信息，但我假设points[0..3] 的顺序是：左上角、左下角、右下角、右上角。在我看来就是这样。

我认为您的错误是您可能忘记了 Y 向下增加。您的路径公式中的某些符号是错误的。

第二行的+ bar_radius 应该是- bar_radius。
第五行的+ bar_radius应该是- bar_radius。

const indexX = 0, indexY = 1;
const bar_radius = 10;

const points = [[30, 10],
                [30, 190],
                [70, 190],
                [70, 10]];

const bar = document.getElementById("bar");

path = 'M ' + points[0][indexX] + ',' + (points[0][indexY] - 7) + ' ' +
        'L' + points[1][indexX] + ',' + (points[1][indexY] - bar_radius) + ' ' +
        'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX] + bar_radius) + ',' + points[1][indexY] + ' ' +
        'L' + (points[2][indexX] - bar_radius) + ',' + points[2][indexY] + ' ' +
        'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + points[2][indexX] + ',' + (points[2][indexY] - bar_radius) + ' ' +
        'L' + points[3][indexX] + ',' + (points[3][indexY] - 7) + ' ' +
        'z';
        
bar.setAttribute("d", path);

<svg width="100" height="200">
  <path id="bar" d="" fill="rebeccapurple"/>
</svg>

【讨论】：