如何创建 svg 渐变，其中 3 个点设置在一个混合在一起的三角形中

Question

<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="yellow"/>
      </linearGradient>
  </defs>
    <circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>

我想在一个有 3 个颜色点的圆圈中创建一个 svg 渐变，像这样在三角形中设置。

<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="yellow"/>
      </linearGradient>
  </defs>
    <circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>

我已经尝试创建具有三个停靠点的线性渐变，但我不确定如何将停靠点定位在我需要的位置（左上右）。

Answer 1

这已经是您所能得到的最接近的了。

svg {
  width: 400px;
}

<svg viewBox="0 0 100 100">
  <defs>
    <filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="9"/>
    </filter>
    <mask id="circle">
      <circle cx="50" cy="50" r="50" fill="white"/>
    </mask>
  </defs>
  <g mask="url(#circle)" filter="url(#blur)">
    <rect x="-10" width="110" height="110" fill="blue"/>
    <rect x="50" width="60" height="110" fill="yellow"/>
    <polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
    <polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
    <polygon points="100,10, 100,30, 50,50" fill="#f80"/>
  </g>
  
</svg>

由于您在 CSS/SVG 中获得的混合纯粹是通过分别组合 RGB 颜色的红色、绿色和蓝色通道来工作的，所以当我们混合蓝色和黄色时，它不知道我们期望看到绿色.相反，您只会看到暗灰色。

所以在上面的例子中，我 "cheated" 通过在我们的三种主要颜色之间添加 "correct" 颜色的条子。例如，我在蓝色和黄色部分之间放了一条绿色。

如果我不这样做，上面的示例将如下所示：

svg {
  width: 400px;
}

<svg viewBox="0 0 100 100">
  <defs>
    <filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7"/>
    </filter>
    <mask id="circle">
      <circle cx="50" cy="50" r="50" fill="white"/>
    </mask>
  </defs>
  <g mask="url(#circle)" filter="url(#blur)">
    <rect x="-10" width="110" height="110" fill="blue"/>
    <rect x="50" width="60" height="110" fill="yellow"/>
    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
  </g>
  
</svg>

Answer 2

本主题灵感来自@Paul LeBeau 的回答

题主没有问动画的问题。但我认为这些选项对某人有用。

渐变旋转

为一组元素添加了动画命令：

circle cx="50" cy="50" r="5" fill="white" stroke="silver">
     <animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360   50 50" repeatcount="indefinite"/>
   </circle>

<style>
svg {
  width: 400px;
}
</style>
<svg viewBox="0 0 100 100">
  <defs>
    <filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
    </filter> 
    <mask id="circle">
      <circle cx="50" cy="50" r="50" fill="white">
   
    </circle>
    </mask>
  </defs>
  <g id="gr1" mask="url(#circle)" filter="url(#blur)">
    <rect x="-10" width="110" height="110" fill="blue"/>
    <rect x="50" width="60" height="110" fill="yellow"/>
    <polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
    <polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
    <polygon points="100,10, 100,30, 50,50" fill="#f80"/>
  </g>
   <circle cx="50" cy="50" r="5" fill="white" stroke="silver">
     <animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360   50 50" repeatcount="indefinite"/>
   </circle>  
   
   </svg>

动画轨道

增加圆半径动画命令。

<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
     <animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
    </circle>

<style>
svg {
  width: 400px;
}
</style>
<svg viewBox="0 0 100 100">
  <defs>
    <filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
    </filter> 
    <mask id="circle">
      <circle cx="50" cy="50" r="50" fill="white">
     </circle>
    </mask>
  </defs>
  <g id="gr1" mask="url(#circle)" filter="url(#blur)">
    <rect x="-10" width="110" height="110" fill="blue"/>
    <rect x="50" width="60" height="110" fill="yellow"/>
    <polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
    <polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
    <polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
    <polygon points="100,10, 100,30, 50,50" fill="#f80"/>
  </g>
   <circle cx="50" cy="50" r="5" fill="white" stroke="silver">
     <animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360   50 50" repeatcount="indefinite"/>
   </circle>  
   <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
     <animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
 </circle> 
  <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
     <animate id="an2" attributeName="r" values="5;50" dur="2s" begin="0.5s" repeatcount="indefinite" />
   </circle> 
   <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
     <animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1s" repeatcount="indefinite" />
   </circle> 
     <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
     <animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1.5s" repeatcount="indefinite" />
   </circle> 
 <circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
     <animate id="an3" attributeName="r" values="5;50" dur="2s" begin="2s" repeatcount="indefinite" />
   </circle>  
   </svg>

如何创建 svg 渐变，其中 3 个点设置在一个混合在一起的三角形中

How to create svg gradient with 3 points set out in a triangle that blend together

html

css

svg

gradient