svg的一个小问题

Question

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="circle">
      <g>
          <circle cx="30" cy="15" r="6" stroke="#4ee9fa" 
      stroke-width="2" fill="#4ee9fa"/>
      </g>
    </svg>

.circle{
        width: 10px;
        height: 10px;
        background-color: #4ee9fa;
        box-shadow: 0px -1px 6px 5px rgb(78 233 250 / 50%);
        position: absolute;
        z-index:10;
        border-radius:5px;
    }

效果：

但是我不想把类名放到svg上，如果我放到g标签上，样式就变为这样了

怎么把样式放到别的元素上，还能使展示效果不变呢

Answer 1

原因是 box-shadow 添加到svg 标签上有效，g 是一个分组标签，box-shadow是无效的，svg 内的渐变色要用特殊的标记处理。