Support for all SVG properties for gradient colors

[setaman]

The gradient color definition is based on SVG but supports only a few properties. It should be possible to to define gradients with all available SVG props.

Note that the radial gradient misses the r property to be able to achieve more interesting effects, for example thins lines on the stroke:

<defs>
    <radialGradient id="strokeGradient" cx="50%" cy="50%" r="100%">
      <!-- Fill most of the stroke with red -->
      <stop offset="0%" stop-color="#ff0000"/>
      <stop offset="90%" stop-color="#ff0000"/>
      <!-- Sharp transition with 2 lines at very end -->
      <stop offset="90%" stop-color="#0000ff"/>
      <stop offset="94%" stop-color="#0000ff"/>
      <stop offset="94%" stop-color="transparent"/>
      <stop offset="96%" stop-color="transparent"/>
      <stop offset="96%" stop-color="#0000ff"/>
      <stop offset="100%" stop-color="#0000ff"/>
    </radialGradient>
  </defs>
  
  <!-- Circle with gradient stroke -->
  <circle 
    cx="150" 
    cy="150" 
    r="48" 
    fill="none"
    stroke="url(#strokeGradient)" 
    stroke-width="96"
  />

• More SVG attributes can be used to define gradient colors