svg 中如何让渐变填充沿着路径方向进行填充?

Question

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1">
      <stop class="stop1" offset="0%" />
      <stop class="stop2" offset="50%" />
      <stop class="stop3" offset="100%" />
    </linearGradient>
    <style>
      <![CDATA[
              path { stroke: url(#Gradient1); }
              .stop1 { stop-color: red; }
              .stop2 { stop-color: black; }
              .stop3 { stop-color: blue; }
            ]]>
    </style>
  </defs>

   <path d="M 10 10 C 20 80, 80 40, 100 100 l -20 40 -60 -20" stroke-width="10" fill="transparent"/>
</svg>

在对路径进行填充时,发现渐变的填充其实是按照一个类似矩形框中进行填充的,因此在路径的末端,会变为红色。有什么方法可以让渐变的填充是按照路径的方向进行填充,也就是路径末端是蓝色。

Answer 1

stroke中支持线性渐变和径向渐变，都做不到上面要求；
想实现上面效果，貌似只能用canvas或者paint函数自己画了