Hi I'm working with SVG here I trying to add the gradient to SVG like this
白色和灰色渐变,但我无法实现所需的输出。谁能指出我正确的方向。
<svg viewBox="0 0 400 400">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat">
<stop offset="0.05" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#777" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="1" x2="0" y2="0" spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="0%" stop-color="#fff" stop-opacity="0"/>
<stop offset="10%" stop-color="#bdbdbd" stop-opacity="0.5"/>
<stop offset="20%" stop-color="#fff" stop-opacity="0"/>
<stop offset="30%" stop-color="#bdbdbd" stop-opacity="0.5"/>
<stop offset="40%" stop-color="#fff" stop-opacity="0"/>
<stop offset="50%" stop-color="#bdbdbd" stop-opacity="1"/>
<stop offset="60%" stop-color="#fff" stop-opacity="0"/>
<stop offset="70%" stop-color="#bdbdbd" stop-opacity="0.5"/>
<stop offset="80%" stop-color="#bdbdbd" stop-opacity="0"/>
<stop offset="100%" stop-color="#fbfbfb" stop-opacity="0.5"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
微调灰色和白色色调的渲染取决于您使用的显卡、浏览器和操作系统。
因此,我发送了几个选项。您可以使用您喜欢的任何选项,也可以通过更改颜色来稍微调整自己。
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="0%" stop-color="#B4B4B5" stop-opacity="1"/>
<stop offset="17%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="30%" stop-color="#B4B4B5" stop-opacity="0.6"/>
<stop offset="49%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="61%" stop-color="#B4B4B5" stop-opacity="0.6"/>
<stop offset="80%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="95%" stop-color="#B4B4B5" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
2#变体
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="0%" stop-color="#B4B4B5" stop-opacity="1"/>
<stop offset="17%" stop-color="#F6F6F6" stop-opacity="0.8"/>
<stop offset="30%" stop-color="#B4B4B5" stop-opacity="0.6"/>
<stop offset="49%" stop-color="#F6F6F6" stop-opacity="0.8"/>
<stop offset="61%" stop-color="#B4B4B5" stop-opacity="0.6"/>
<stop offset="80%" stop-color="#F6F6F6" stop-opacity="0.8"/>
<stop offset="95%" stop-color="#B4B4B5" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
3#变种
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="1" spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="0%" stop-color="#ABABAC" stop-opacity="1"/>
<stop offset="17%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="30%" stop-color="#ABABAC" stop-opacity="0.6"/>
<stop offset="49%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="61%" stop-color="#ABABAC" stop-opacity="0.6"/>
<stop offset="80%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="95%" stop-color="#ABABAC" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
为了更精确地调整您的口味,最好使用stop-color
and stop-opacity
选择价值观。
Update
对于方法spreadMethod ="repeat"
要开始在您的示例中工作,您需要将梯度覆盖范围减少三倍。为此,请设置x1 ="0" y1 ="0" x2 ="0" y2 ="0.33"
结果,调整一个波的色调,我们得到了它完全相同的副本,与大量的选项相比,这简化了该过程stop-offset
<svg viewBox="0 0 700 700" class="bubble-svg">
<defs>
<linearGradient id="GradientRepeat" x1="0" y1="0" x2="0" y2="0.33"
spreadMethod="repeat" gradientTransform="rotate(170)">
<stop offset="10%" stop-color="#ABABAC" stop-opacity="1"/>
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.8"/>
<stop offset="85%" stop-color="#ABABAC" stop-opacity="1"/>
</linearGradient>
</defs>
<circle class="sub-menu-circle" cx="0" cy="200" r="160" fill="url(#GradientRepeat)" />
</svg>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)