如何将linearGradient添加到垂直SVG线[重复]

Question

我正在尝试为在顶部淡出但没有运气的线条的笔划添加渐变。实际上，我有点像这样工作，但即使在 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>

谢谢

Answer 1

它看起来像一个错误和一个黑客，但有效：

<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>，这不是那么hacky：

<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>

Answer 2

检查一下，我对 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>