SVG 径向渐变在元素之间有小空间

Question

我需要将径向/圆锥形渐变添加到 SVG 圆中。不幸的是，标准不支持：https://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient

所以，我寻求了一个类似于此的解决方案：但我没有使用多种颜色，而是使用具有 alpha 变化的相同颜色。

小米最后的成绩是这样结束的：

<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>

https://codepen.io/scvsoft-marianovicente/pen/abmrdXo

看起来不错，但是现在，我在每个元素之间留出了小空间。（取决于浏览器，某些地方看起来比其他地方更明显）。

我尝试申请 distortion/blur。隐藏它但会影响所有边界。可以隐藏这个空格吗？

Answer 1

尝试退火过滤器 (dilate/erode)。看看它是否能解决您的问题。

<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 轮廓被移除。

SVG 径向渐变在元素之间有小空间

SVG radial gradient has small spaces between elements

svg

radial-gradients