SVG径向梯度在元素之间有很小的空间
我需要在SVG圆中添加一个径向/锥形渐变。不幸的是,标准中不支持: 所以,我选择了一个类似的解决方案:但是我没有使用多种颜色,而是使用相同的颜色,带有一个alpha变化 Mi最终结果如下:SVG径向梯度在元素之间有很小的空间,svg,radial-gradients,Svg,Radial Gradients,我需要在SVG圆中添加一个径向/锥形渐变。不幸的是,标准中不支持: 所以,我选择了一个类似的解决方案:但是我没有使用多种颜色,而是使用相同的颜色,带有一个alpha变化 Mi最终结果如下: <g fill="none" stroke-width="8" transform="translate(-49,-10) scale(1.2) rotate(0, 125, 50)" opacity="1">
<g fill="none" stroke-width="8" transform="translate(-49,-10) scale(1.2) rotate(0, 125, 50)" opacity="1">
<path d="M127.5593032836914,78.30342873930931 C124.73236846923828,78.30342873930931 122.4406967163086,76.50826272368431 122.4406967163086,74.29380044341087 C122.4406967163086,72.07933816313744 124.73236846923828,70.28415688872337 127.5593032836914,70.28415688872337 V78.30342873930931 z" fill="#23B26D"
transform="scale(-1,1) translate(-252,-48.7)" />
<path d="M124.99998474121094,25.63152313232422 A24.357080459594727,24.368465423583984 0 0 1 146.0932159423828,37.81575393676758 "
stroke="url(#redyel)" />
<path d="M146.0932159423828,37.81575393676758 A24.357080459594727,24.368465423583984 0 0 1 146.0932159423828,62.18423271179199 "
stroke="url(#yelgre)" />
<path d="M146.0932159423828,62.18423271179199 A24.357080459594727,24.368465423583984 0 0 1 124.99998474121094,74.36847496032715 "
stroke="url(#grecya)" />
<path d="M124.99998474121094,74.36847496032715 A24.357080459594727,24.368465423583984 0 0 1 103.90676879882812,62.18423271179199 "
stroke="url(#cyablu)" />
<path d="M103.90676879882812,62.18423271179199 A24.357080459594727,24.368465423583984 0 0 1 103.90676879882812,37.81575393676758 "
stroke="url(#blumag)" />
<path d="M103.90676879882812,37.81575393676758 A24.357080459594727,24.368465423583984 0 0 1 124.99998474121094,25.63152313232422 "
stroke="url(#magred)" />
</g>
<defs>
<linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.41"/>
</linearGradient>
<linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0"
y2="1">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.41"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.52"/>
</linearGradient>
<linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0"
y2="1">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.52"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.63"/>
</linearGradient>
<linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0"
y2="0">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.63"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.74"/>
</linearGradient>
<linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0"
y2="0">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.74"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="0.85"/>
</linearGradient>
<linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1"
y2="0">
<stop offset="0%" stop-color="#23B26D" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#23B26D" stop-opacity="1"/>
</linearGradient>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="60%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
</linearGradient>
<linearGradient id="rgrad" x1="0%" y1="50%" x2="100%" y2="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="60%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
</linearGradient>
</defs>
它看起来很好,但是现在,每个元素之间都有很小的空间。(根据浏览器的不同,某些位置的视觉效果比其他位置更明显)
我试图应用失真/模糊。隐藏但影响所有边界。
是否可以隐藏此空间?尝试退火过滤器(扩张/侵蚀)。看看它是否能解决你的问题
<svg class="streak-animation" viewbox="0 0 250 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="anneal">
<feMorphology operator="dilate" radius="1" />
<feMorphology operator="erode" radius="1" />
</filter>
</defs>
<g class="all-streaks" filter="url(#anneal)">
更多详情-按要求:
- feMorphology过滤器将每个像素的R、G、B和A值替换为2*半径内这些颜色通道的最大(放大)或最小(侵蚀)值。对于简单的单色形状,这将有效地在形状周围添加(或减去)一个像素的轮廓
- 在本例中,放大填充形状之间的超薄线条(并在整个形状周围添加1px边框)。但是,当您进行侵蚀时,形状之间不再有任何半透明像素提供要侵蚀的低alpha值,因此仅删除整个形状周围的1px轮廓