相关疑难解决方法(0)

我试图<hr>用SVG 复制一个.现在,使用SVG制作一条直线可以完美地工作,但是第二个我用渐变划线它将不再以直线显示.

以下代码有效,但请注意,y1和y2必须相隔1个单位.例如,如果我将y1和y2设置为210,则该行将消失.

<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
        <stop offset="50%" style="stop-color:rgba(0,0,0,0.75);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
    </linearGradient>
</defs>
<line x1="40" y1="210" x2="460" y2="211" stroke="url(#grad1)" stroke-width="1" />

我可能只是错过了线性渐变的一些明显功能,而且线条看起来还不错,但我更倾向于让它笔直.谢谢.

我正在尝试为线条的笔划添加渐变，该线条在顶部淡出，但没有运气。实际上，我是这样工作的，但即使在 Chrome 中，某些 SVG 尺寸也会出现浏览器问题，其中渐变会中断并且是固定的：

<linearGradient
  id='whiteFadeGrad'
  x1={svgHeight}
  y1='0'
  x2='0'
  y2={svgHeight}
  gradient-units='userSpaceOnUse'
>
  <stop offset='0' stop-color='rgba(255,255,255,0)' />
  <stop offset='1' stop-color='rgba(255,255,255,0.2)' />
</linearGradient>

我宁愿坚持使用百分比单位，但无法让它工作：

<linearGradient
  id='whiteFadeGrad'
  x1={svgHeight}
  y1='0'
  x2='0'
  y2={svgHeight}
  gradient-units='userSpaceOnUse'
>
  <stop offset='0' stop-color='rgba(255,255,255,0)' />
  <stop offset='1' stop-color='rgba(255,255,255,0.2)' />
</linearGradient>

谢谢