如何使用svg制作一个像圆角三角形一样的圆形图像？

Question

我想像下面这样剪辑我的图像。

如上图所示，箭头位于右侧。我想要这样的代码，它可以在左边或右边。不希望箭头同时出现在两边。我也希望代码是通用的。我的意思是我不希望它仅适用于特定尺寸的图像。

我尝试了很长时间，但我不太擅长 svg 路径，所以我失败了。

目前我已经实现了以下。

#image {
    padding: 0;
    -webkit-clip-path: url(#clip);
    clip-path: url(#clip);
    border-radius: 20px;
    background-color: red;
}

<img id="image" src="https://i.stack.imgur.com/EVxru.jpg" alt="">
<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
        <clipPath id="clip" clipPathUnits="objectBoundingBox">
            <path d="M.0,.0 L0.7,.0 Q.8,.0 .83,.1 L.83,.1 .9,.48 C.905,.48 .905,.52 .9,.52 L.8,.9 Q.8,1 .9,1 Z">
            </path>
        </clipPath>
    </defs>
</svg>

我无法将底角弄圆。而且我不知道我是否把上角做对了。也可以看到中间的曲线不是很平滑。

请帮我解决这个问题。想用js也可以用。

Answer 1

我会使用 css clip-path 作为形状，使用 SVG 作为圆边：

.image {
  display:inline-block;
  filter:url(#goo)
}
.image img {
  display:block;
  clip-path:polygon(0 0,calc(100% - 40px) 0,100% 50%,calc(100% - 40px) 100%,0 100%);
}

.image.left img {
  clip-path:polygon(40px 0,100% 0,100% 100%,40px 100%,0 50%);
}

<div class="image">
<img src="https://picsum.photos/id/1/200/200">
</div>

<div class="image left">
<img src="https://picsum.photos/id/1069/200/200">
</div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>                                  <!-- adjust the the 10 here --v         -->
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>