使用 SVG path 绘制梯形也很简单。下面是一个示例代码:
<svg width="200" height="100">
<path d="M 20 10 L 180 10 L 150 80 L 50 80 Z" />
</svg>
在这个示例中,我们使用了一个 <path>
元素来绘制梯形。d
属性包含了绘制路径的指令。M
表示移动到指定的坐标点,L
表示从当前点连接到指定的点,Z
表示连接到起始点,闭合路径。
具体来说,我们先移动到左下角点 (20, 10)
,然后连接到右下角点 (180, 10)
,再连接到右上角点 (150, 80)
,最后连接回左上角点 (50, 80)
并闭合路径。
你可以根据需要调整坐标点的位置和顺序,来实现不同形状的梯形。
除了直接在 HTML 中使用 <svg>
元素外,你也可以在 JavaScript 中通过创建 SVG 元素来绘制梯形。以下是一个示例代码:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "100");
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", "M 20 10 L 180 10 L 150 80 L 50 80 Z");
svg.appendChild(path);
document.body.appendChild(svg);
在这个示例中,我们先创建了一个 <svg>
元素,并设置宽度和高度。接着,我们创建一个 <path>
元素,并设置其 d
属性。最后,我们将 <path>
元素添加到 <svg>
元素中,并将整个 SVG 元素添加到 HTML 页面的 <body>
中。
无论是在 HTML 中使用 <svg>
元素,还是在 JavaScript 中创建 SVG 元素,都可以轻松地绘制出梯形。