javascript - 使用 SVG 从现有代码生成大的向上指向的三 Angular 形

Question

我正在使用 Tympanus 中的以下代码生成一个大的向下的三 Angular 形。我想做的是使用相同的技术生成一个大的向上指向的三 Angular 形，基本相反。有谁知道如何调整此代码来实现这一目标？

非常感谢您的帮助。

最好的问候...

svg#bigTriangleColor {
    pointer-events: none;
}
.container svg {
    display: block;
}
svg:not(:root) {
    overflow: hidden;
}
#bigTriangleColor path {
    fill: #3498db;
    stroke: #3498db;
    stroke-width: 2;
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>

Answer 1

你可以很容易地理解 line commands在 SVG 路径中。

我们这里有:

<path d="M0 0 L50 100 L100 0 Z"></path>

说:

Move to (0,0), make a line going to (50,100), make another line going to (100,0), close the path.

因此，要反转三 Angular 形，您只需要:

<path d="M0 100 L50 0 L100 100 Z"></path>

基本上说:

Move to (0,100), make a line going to (50,0), make another line going to (100,100), close the path.

查看演示:

svg#bigTriangleColor {
    pointer-events: none;
}
.container svg {
    display: block;
}
svg:not(:root) {
    overflow: hidden;
}
#bigTriangleColor path {
    fill: #3498db;
    stroke: #3498db;
    stroke-width: 2;
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>