Question

我用过这段代码：

<defs>
            <filter id="lineshadow">
                <feFlood result="flood" flood-color="#0F0" flood-opacity="1"></feFlood>
                <feComposite in="flood" in2="SourceGraphic" operator="in" result="color-out"></feComposite>
                <feGaussianBlur result="color-out" stdDeviation="1" in="mask"></feGaussianBlur>
                <feOffset in="shadow" dx="0" dy="0" result="color-out"></feOffset>
                <feMerge>
                    <feMergeNode in="drop-shadow"></feMergeNode>
                    <feMergeNode in="SourceGraphic"></feMergeNode>
                </feMerge>
            </filter>
        </defs>

但是不需要过滤器，因为它不适用于旧版本的铬。是否有任何其他选项可以在一条线周围创建“发光”。

Answer 1

你可以尝试这样的事情。

<svg>

  <g stroke="red" fill="none" stroke-linecap="round">

    <!-- the glow -->
    <line x1="50" y1="75" x2="250" y2="75" stroke-width="30" stroke-opacity="0.02"/>
    <line x1="50" y1="75" x2="250" y2="75" stroke-width="20" stroke-opacity="0.05"/>
    <line x1="50" y1="75" x2="250" y2="75" stroke-width="12" stroke-opacity="0.1"/>
    <line x1="50" y1="75" x2="250" y2="75" stroke-width="8" stroke-opacity="0.25"/>
    <line x1="50" y1="75" x2="250" y2="75" stroke-width="6" stroke-opacity="0.5"/>

    <!-- the black line -->
    <line x1="50" y1="75" x2="250" y2="75" stroke-width="4" stroke="black"/>
    
  </g>
  
</svg>

如何在不使用svg中的过滤器的情况下在路径周围创建“发光”？

1 个答案: