时间戳

首页 > 解决方案 > 如何平滑 SVG 线条

svg - 如何平滑 SVG 线条

问题描述

示例是通过链接

在此处输入图像描述

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
    </svg>

如您所见，线的末端有切角，没有填充到边框的末端。如何平滑这个？

标签： svg

解决方案

角落被截断，因为它超出了您的画布。只要让你的画布大一点或你的线小一点，它就会起作用

这是一个示例，我将线向右移动了 1 个单位，并使画布稍微变大。你可以看到角落是他们本来的样子 

<svg viewBox="0 0 101 100" xmlns="http://www.w3.org/2000/svg">
      <line x1="1" y1="80" x2="100" y2="20" stroke="black" />
    </svg>

推荐阅读