SVG渐变四周

Question

我设计了一个进度条，我需要在其周围显示渐变光。 我正在使用这样的线性渐变：

<linearGradient id="settingsProgressBarInnerGlow" x1="50%" y1="0%" x2="50%" y2="100%">
<stop stop-color="#ffffff" offset="0" stop-opacity="0"/>
<stop stop-color="#ffffff" offset="0.2" stop-opacity="0.1"/>
<stop stop-color="#E6F7FC" offset="0.5" stop-opacity="0.4"/>
<stop stop-color="#ffffff" offset="0.8" stop-opacity="0.1"/>
<stop stop-color="#ffffff" offset="1" stop-opacity="0"/>
</linearGradient>

但是这给了我这样的渐变。 我希望像这样围绕条形的渐变。

有人可以帮我找到最佳答案吗？

Answer 1

从您的图片中，您似乎可以使用box-shadow属性执行所需操作。默认情况下，Svgs在盒子中排序。

这是jsFiddle

HTML

<div class="bar">
    <div class="progress"></div>
</div>

CSS

.bar {
    position: relative;    
    width: 400px;
    height: 12px;
    background-color: #333;
}

.bar .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 80%;
    background-color: #559adb;
    box-shadow: 0 0 20px 0 #559adb;
}

你也可以通过在颜色后加一个逗号并定义第二个来获得多个盒子阴影 - 这可能有助于创建渐变效果。

.bar .progress {
    box-shadow: 
        0 0 20px 0 #559adb,
        0 0 20px 0 red;  /* etc */
}