SVG Gradient

Demo

How to

  1. Define <linearGradient>
  2. fill gradient color by using css

vue

<template>
  <svg>
    <defs>
      <linearGradient id="linearG">
        <stop offset="0%" stop-color="yellow" />
        <stop offset="50%" stop-color="hotpink" />
        <stop offset="100%" stop-color="deepskyblue" />
      </linearGradient>
      
      <style>
        .hair-color {
          fill: url('#linearG')
        }
      </style>
    </defs>
    <path class="hair-color" d="..." />
    ...
  </svg>
<template>