[SOLVED] How do I mix pattern and gradient into one path?

How do I mix pattern and gradient into one path?

It is important for the customer that I mix both the gradient and the pattern to be applied to the same path ...is it possible ?

The scheme is as follows:

<svg id="svg" viewBox="0 0 1000 1000">
    <defs>
        <linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" >
            <stop offset="0%" style="stop-color:rgb(255,29,139);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
        </linearGradient>
        <pattern id="bg" x="0" y="0" width="20" height="20" viewBox ='0 0 80 80' patternUnits="userSpaceOnUse">
            <circle fill="0x0" cx="3" cy="3" r="2.5"></circle>
        </pattern>
    </defs>
  <g fill="url(#grad)">
    <path id="path3" d="M0,0 1000,0 1000,1000 0,1000z"  fill="url(#bg)"></path>
  </g>
</svg>

I would like to get a gradient + pattern = (fill path) https://codepen.io/topicstarter/pen/eYNgRyP as in the sandbox, but only apply gradient and pattern to the same path

Solution

One solution is to create a new <pattern> that combines both the gradient and the original pattern.

<svg id="svg" viewBox="0 0 1000 1000">
    <defs>
        <linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" >
            <stop offset="0%" style="stop-color:rgb(255,29,139);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
        </linearGradient>
        <pattern id="bg" x="0" y="0" width="20" height="20" viewBox ='0 0 80 80' patternUnits="userSpaceOnUse">
            <circle fill="0x0" cx="3" cy="3" r="2.5"></circle>
        </pattern>

        <pattern id="both" width="100%" height="100%">
           <rect width="100%" height="100%" fill="url(#grad)"/>
           <rect width="100%" height="100%" fill="url(#bg)"/>
        </pattern>
    </defs>
  <g>
    <path id="path3" d="M0,0 1000,0 1000,1000 0,1000z"  fill="url(#both)"></path>
  </g>
</svg>