How to apply gradient colors to svg path

Question

<svg width="300" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        path {fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient" x1="0" x2="100%" y1="0" y2="100%">
          <stop offset="20%" stop-color="red" />
          <stop offset="20%" stop-color="yellow" />
          <stop offset="40%" stop-color="yellow" />
          <stop offset="40%" stop-color="black" />
          <stop offset="60%" stop-color="black" />
          <stop offset="60%" stop-color="blue" />
          <stop offset="80%" stop-color="blue" />
          <stop offset="100%" stop-color="pink" />
        </linearGradient>
      </defs>
      
       <path d="M150 0 L75 200 L225 200 Z" />
    </svg>
 

I am trying to implement shapes using svg & appling gradient colors on shapes based on some conditons. It works fine with Square,rectangle and circle. When i use triangle or any other irregular shapes, one or two colors from gradient are missing. Its because gradient colors are applied on rectangle so the area outside the path getting clipped. Any possible solution to apply gradient colors only on the path area? Red & pink colors are not applied on the svg.