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

Question

我正在使用 SVG 将图像剪辑路径为三角形。我的目标是让路径扩展并在悬停时变成一个圆圈（平稳过渡）。

我发现的最接近的是这个 codepen 作为对网站挑战的回应： http://codepen.io/enjikaka/pen/hCGjE 它肯定会过渡，但它似乎与我正在做的剪辑有很大不同。我对 svg 非常陌生（刚刚开始使用它来创建这些三角形）。

这是我的代码（引导程序 col-sm-4 div 中的上三角剪辑和下三角剪辑）：

<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>

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

如果有人知道如何做到这一点，我已经在互联网上搜索无济于事，非常感谢您的帮助。

Answer 1

这可能是实现此效果的最简单方法。我们实际上使用的是蒙版而不是剪辑路径。我们从一个三角形开始作为蒙版，然后放大一个圆圈（这也是蒙版的一部分），使其与三角形大小相同。

只要动画速度很快，它就可以很好地工作。如果您想要一个较慢的动画，您可能希望采用一种使三角形变形的方法。

.tri-up
{
    background-color: red;
    width: 400px;
  height: 400px;
}

.tri-up:hover svg .circmask
{
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
}

.tri-up svg .circmask
{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
}

<div class='tri-up'>
    <svg width="100%" height="100%" viewBox="-100 -100 200 200">
        <mask id="clipTriangleUp">
            <polygon points="0,-100, 87,50, -87,50" fill="white"/>
            <circle r="50" fill="white" class="circmask"/>
        </mask>
        <image mask="url(#clipTriangleUp)" 
               x="-100" y="-100" width="100%" height="100%" 
               xlink:href="http://placehold.it/400x400"/>
    </svg>
</div>