SVG圆角三角形梯度叠加和背景图像

Question

我有下面的代码，用紫色渐变创建简单的圆角三角形。我试图插入一个背景图像，将填充形状的梯度下方创建到下面的截图类似的效果：

我想要实现的目标：

我代码到目前为止（不显示图像）：

 <svg width="100%" viewBox="0 0 1440 742" version="1.1"
      baseProfile="full"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:ev="http://www.w3.org/2001/xml-events">
     <defs>
         <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
             <stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
             <stop stop-color="#251D4B" offset="100%"></stop>
         </linearGradient>
         <pattern id="img1" patternUnits="userSpaceOnUse" width="1400" height="742">
             <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1400" height="742" />
         </pattern>
         <path d="M526.611472,1330.75724 C526.681681,1330.68703 525.998884,-525.688822 526.611472,-525.076039 L1243.10385,191.419563 C1359.86286,308.179101 1359.86286,497.502097 1243.10385,614.261635 L526.611472,1330.75724 Z" id="path-2"></path>
     </defs>
     <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Knowledge-base-article">
             <g id="businessman-in-workplace-PYDTUKV" transform="translate(-209.000000, -63.000000)">
                 <mask id="mask-3" fill="white">
                     <use xlink:href="#path-2"></use>
                     <use xlink:href="#img1"></use>
                 </mask>
                 <use id="Mask" fill="url(#linearGradient-1)" transform="translate(928.513633, 402.840523) scale(-1, 1) rotate(90.000000) translate(-928.513633, -402.840523) " xlink:href="#path-2"></use>
             </g>
         </g>
     </g>
 </svg>

Answer 1

我将使用如下所示的转换使用纯CSS解决方案

.container {
  width:300px;
  height:300px;
  margin:auto;
  position:relative;
  overflow:hidden;
}
.container > div {
  position:absolute;
  width:100%;
  height:100%;
  border-radius:80px;
  transform-origin:top left;
  transform:translateX(-20%) rotate(-45deg);
  overflow:hidden;
}
.container > div:before {
   content:"";
   position:absolute;
   width:calc(100% * 1.4);
   height:calc(100% * 1.4);
   transform:rotate(45deg);
  transform-origin:top left;
   background:
    linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
    url(https://picsum.photos/300/300?image=1069) top/cover;
}

<div class="container">
  <div></div>
</div>

将容器设为全宽：

.container {
  margin:auto;
  position:relative;
  overflow:hidden;
}
.container > div {
  width:100%;
  padding-top:100%;
  border-radius:15%;
  transform-origin:top left;
  transform:translateY(-15%) translateX(-21%) rotate(-45deg);
  overflow:hidden;
}
.container > div:before {
   content:"";
   position:absolute;
   top:0;
   left:0;
   width:calc(100% * 1.4);
   height:calc(100% * 1.4);
   transform:rotate(45deg);
   transform-origin:top left;
   background:
    linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
    url(https://picsum.photos/300/300?image=1069) top/cover;
}

<div class="container">
  <div></div>
</div>

Answer 2

将<path>用作<mask>。然后在您的<mask>上使用该<image>，然后在顶部的<mask>上使用相同的<rect>。最后，用您的<rect>填充<gradient>。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
  <defs>
     <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
       <stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
       <stop stop-color="#251D4B" offset="100%"></stop>
     </linearGradient>
    <mask id="mask">
      <path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
    </mask>
  </defs>
  <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
  <rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg>