如何在svg线上放置渐变？

Question

这是我的svg行：

<svg height="500" width="500">
  <line x1="0" y1="0" x2="300" y2="0" style="stroke:linear-gradient(45deg, #822c8e 0%, #3b88cc 100%);stroke-width:5" />
  Sorry, your browser does not support inline SVG.
</svg>

我也尝试这样做

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%"  stop-color="green"/>
        <stop offset="95%" stop-color="gold"/>
    </linearGradient>
</defs>

然后将其添加到style="stroke: url(#MyGradient)"中，但这仍然行不通。有什么想法吗？