Question

我正在使用SVG将图像剪切路径到三角形。我的目标是让路径在悬停时（在平滑过渡中）展开并变成圆圈。

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

这是我的代码（bootstrap 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>

我在这里有一些其他的类，它有两个三行，（上下）两行三个。负边距使三角形比自举列更靠近。

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

Answer 1

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

只要动画很快，这个效果很好。如果你想要一个较慢的动画，你可能会想要采用一种改变三角形的方法。

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

从SVG Triangle剪辑平滑过渡到Circle

1 个答案: