如何在垂直SVG线条上添加线性渐变

Question

如何在垂直SVG线条上添加线性渐变

4

我试图添加一个渐变到一条线的描边上，顶部逐渐消失，但是一直没有成功。实际上，我可以像这样做，但是它在浏览器上有问题，即使在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>

我更喜欢使用百分比单位，但无法让它正常工作：

<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>

<svg height="200" width="500">
  <defs>
    <linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset='0%' stop-color='red' />
      <stop offset='100%' stop-color='blue' />
    </linearGradient>
  </defs>
  <line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
  <line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>

谢谢

- Dominic

啊，有趣的@Kaiido - Dominic

2个回答

1

请查看，我对SVG不太了解，但是简单的搜索可以帮助我完成工作。

您能否查看代码。

<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>

<svg height="200" width="500">
  <defs>
    <linearGradient id="e" x1="40" y1="210" x2="400" y2="210" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90)">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
  </defs>
  <line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:10px; shape-rendering: crispEdges;" />
  <line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#e'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>

- Akhil Aravind

谢谢，正如我所提到的，我想尝试避免使用userSpaceOnUse，因为我有一个问题，虽然还没有确定是否使用%来解决该问题，但是还是要点赞你的努力。 - Dominic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kosh · Accepted Answer

看起来像是一个bug和一个hack，但它起作用了：

<svg height="200" width="500">
  <defs>
    <linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset='0%' stop-color='red' />
      <stop offset='100%' stop-color='blue' />
    </linearGradient>
  </defs>
  <line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
  <line x1="120" y1="0" x2="120.001" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>

您可以使用<rect>代替<line>，这样不会那么麻烦：

<svg height="200" width="500">
  <defs>
    <linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset='0%' stop-color='red' />
      <stop offset='100%' stop-color='blue' />
    </linearGradient>
  </defs>
  <line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
  <rect x="120" y="0" width="4" height="200" style="fill: url('#fadeGrad'); shape-rendering: crispEdges;" />
</svg>