时间戳

首页 > 解决方案 > SVG路径未正确关闭

javascript - SVG路径未正确关闭

问题描述

我正在尝试使用 javascript 创建一个带有 svg 的桥状形状。使用以下 html 我得到了整体形状，但关闭路径是错误的：

<svg height="897" width="414" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 414 897">
    <path stroke-width="3" stroke="blue" style="fill:transparent; fill-opacity: 1" 
        d="M 0 0 V 207 H 30 
           M 30 207 q 0 -177 177 -177 
           M 207 30 q 177 0 177 177 
           H 414 V 0 H 0 z">
    </path>
</svg>

这会产生以下形状：在此处输入图像描述

它以一种奇怪的方式关闭，这意味着它没有正确填充。从拱顶到左上角的奇怪垂直线不应该在那里。如何让它正确关闭并正确填充？

标签： javascriptsvg

解决方案

该路径将从您的最后一个点关闭到最后一个声明的M. 您可以通过删除M除第一个呼叫之外的所有呼叫来解决此问题。由于您正在制作一条连续线，因此您无需每次都移动到新点。

<svg height="897" width="414" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 414 897">
    <path stroke-width="3" stroke="blue" style="fill:transparent; fill-opacity: 1" 
        d="M 0 0 V 207 H 30 
           q 0 -177 177 -177 
           q 177 0 177 177
           H 414 V 0 H 0 z">
    </path>
</svg>

推荐阅读