Html 从SVG三角形剪辑到圆的平滑过渡

我正在使用SVG将图像剪辑成三角形。我的目标是使路径扩展并成为悬停的圆（在平滑过渡中）

我所发现的最接近于此的代码笔是对站点挑战的响应： 当然是过渡，但它似乎与我正在做的剪辑非常不同。我对svg非常熟悉（只是刚刚开始使用它来创建这些三角形）

这是我的代码（bootstrap col-sm-4 DIV中的上三角形剪辑和下三角形剪辑）：

这里还有一些其他的类，它由6个三角形（上下）组成，每三行两行。负边距使三角形比引导列靠得更近

---

如果有人知道如何做到这一点，我已经在互联网上搜索了一遍，但没有结果，非常感谢你的帮助。

这里可能是实现这一效果的最简单方法。我们实际上使用的是面具而不是剪贴画。我们从一个三角形作为遮罩开始，然后放大一个圆（也是遮罩的一部分），使其与三角形的大小相同

只要动画是快速的，这就可以很好地工作。如果想要较慢的动画，则可能需要使用使三角形变形的方法

.tri up
{
背景色：红色；
宽度：400px；
高度：400px；
}
.tri-up：悬停svg.circmask
{
-webkit转换：规模（2）；
变换：尺度（2）；
-webkit转换：-webkit转换0.1s；
转换：转换0.1s；
}
.tri-up svg.circmask
{
-webkit转换：规模（1）；
变换：比例（1）；
-webkit转换：-webkit转换0.1s；
转换：转换0.1s；
}

很大程度上取决于从三角形过渡到圆形（反之亦然）的效果。我可以想出几种方法。也许你可以添加更多信息？@PaulLeBeau感谢您的回复！此时此刻，我的想法是乞丐不能挑肥拣瘦。我只是在寻找一个从三角形剪辑到悬停的圆形剪辑的平滑过渡。不过我对这个问题添加了许多编辑，这样你可以看到一些上下文如果你使用一条路径，你可以变形它。这意味着您的三角形包含与三角形完全相同的点。这里有一个高级示例@localghost，路径变形看起来很棒！你知道我该怎么做吗？这太棒了，谢谢你的回复！我确实认为我在寻找更多的变形三角形路径，使其增长或收缩成一个圆。我确实希望过渡速度稍微慢一点，这更多的是圆在三角形上生长，而不是三角形变成圆。话虽如此，我已经尝试了好几个星期，如果没有其他人回应，这可能是一个选择。我非常感谢你抽出时间来帮忙！！

<div class="col-sm-4">
              <div class='tri-up'>
                            <svg width="100%" height="100%" viewBox="0 0 100 87">
                              <clipPath id="clipTriangleUp">
                                <polygon points="0 87,100 87,50 0"/>
                              </clipPath>
                              <image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://placehold.it/560x484"/>
                            </svg>
                        </div>
                    </a>
                </div>
                <div class="col-sm-4">
                                           <div class='tri-down'>
                            <svg width="100%" height="100%" viewBox="0 0 100 87">
                              <clipPath id="clipTriangleDown">
                                <polygon points="0 0,100 0,50 87"/>
                              </clipPath>
                              <image clip-path="url(#clipTriangleDown)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://placehold.it/560x484"/>
                            </svg>
                        </div>
                    </a>
                </div>