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

Generate Large Upward Pointing Triangle From Existing Code Using SVG

本文关键字：三角形 代码生成 SVG 使用      更新时间：2023-09-26

我使用以下来自Tympanus的代码来生成一个向下指向的大三角形。我要做的是用同样的技巧来生成一个大的向上的三角形，基本的逆三角形。有人知道如何调整这段代码来实现这个目标吗?

非常感谢你的帮助。

致以最亲切的问候……

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>

您可以很容易地理解SVG路径中的行命令。

我们这里有什么:

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

说:

移动到(0,0)，一行到(50,100)，另一行到(100,0)，关闭路径

所以，要反转三角形，你只需要:

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

意思是:

移动到(0,100)，行到(50,0)，另行到(100,100)，关闭路径

检查演示:

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>

你可以用transform把它画反。

  • translate将其向下移动(因为现在它将从下向上绘制而不是从上向下绘制)。
  • 刻度在y方向反转

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 transform="translate(0, 102) scale(1, -1)" d="M0 0 L50 100 L100 0 Z"></path>
</svg>

相关文章：