主页 / 问题 / 800882
Accepted
Дмитрий Полянин
Asked:2020-03-18 18:16:53 +0000 UTC2020-03-18 18:16:53 +0000 UTC

为什么渐变到透明的渐变会产生黑色？

  • 772

有两个渐变圆，一个我过渡到透明颜色transparent，另一个过渡到与背景相同的颜色pink。

我原以为结果会一样，但结果不一样，而且，如果你仔细观察，当你切换到透明色时，会观察到黑色。这是为什么？

我需要什么。

我想生成一个渐变的彩色圆点背景。

但如果我过渡到transparent那里，就会有很多黑暗，这不适合我。而且我不能选择渐变去的固定颜色，因为斑点是随机产生的，在固定的极端颜色的情况下，它们会相互重叠，这可以在第二块中看到例如，但我需要它们发光。在第一个街区，它们发光，但那里出现了黑暗。

如何做到这一点，有可能吗？

<svg style="background-color: pink; width:500px; height:350px;">
  <g>
    <radialGradient id="grad1">
                <stop offset="0%" stop-color="white"></stop>
                <stop offset="15%" stop-color="blue"></stop>
                <stop offset="40%" stop-color="blue"></stop>
                <stop offset="100%" stop-color="transparent"></stop>
            </radialGradient>
    <circle cx="110" cy="110" r="100" fill="url(#grad1)"></circle>
  </g>
  <g>
    <radialGradient id="grad2">
                <stop offset="0%" stop-color="white"></stop>
                <stop offset="15%" stop-color="green"></stop>
                <stop offset="40%" stop-color="green"></stop>
                <stop offset="100%" stop-color="transparent"></stop>
            </radialGradient>
    <circle cx="140" cy="220" r="100" fill="url(#grad2)"></circle>
  </g>
  <g>
    <radialGradient id="grad3">
                <stop offset="0%" stop-color="white"></stop>
                <stop offset="15%" stop-color="blue"></stop>
                <stop offset="40%" stop-color="blue"></stop>
                <stop offset="100%" stop-color="pink"></stop>
            </radialGradient>
    <circle cx="350" cy="110" r="100" fill="url(#grad3)"></circle>
  </g>
  <g>
    <radialGradient id="grad4">
                <stop offset="0%" stop-color="white"></stop>
                <stop offset="15%" stop-color="green"></stop>
                <stop offset="40%" stop-color="green"></stop>
                <stop offset="100%" stop-color="pink"></stop>
            </radialGradient>
    <circle cx="380" cy="220" r="100" fill="url(#grad4)"></circle>
  </g>
</svg>

css

1 个回答

  1. Best Answer

    这可以用 来修复stop-opacity。
    将颜色 transparent更改为blue，然后使用 控制透明度stop-opacity：

    svg {
  background-color: pink;
}
    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version="1.1" width="200" height="200">   
  <defs>
    <radialGradient id="radial">
      <stop offset="0%" stop-color="white" stop-opacity="1.0"/>
      <stop offset="15%" stop-color="blue" stop-opacity="0.3"/>
      <stop offset="40%" stop-color="blue" stop-opacity="0.25"/>
      <stop offset="100%" stop-color="blue" stop-opacity="0"/>
    </radialGradient>
  </defs>
<circle cx="100" cy="100" r="50" fill="url(#radial)"/>
</svg>

    • 4

相关问题