This is to test this problem

    <span clip-path="foo"/>
    

    <svg width="42" height="42" xmlns="https://www.w3.org/2000/svg">
      <circle cx="10" cy="10" r="20" stroke="orange" stroke-width="3" fill="yellow" clip-path="foo"/>
      <linearGradient x1="1" y1="1" x2="1" y2="30" gradientUnits="userSpaceOnUse">
        <stop stop-color="#fff"></stop>
        <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
      </linearGradient>
    </svg>