Why is radialGradient not functioning in my SVG code?

Store Design
,
1

Hello,
i could not figure out why radialGradient is not working in my SVG here my code


{% style %} 
  .instagram-gradient { 
    fill: url(#radial-gradient); 
    stroke-width:0px; 
  } 
{% endstyle %}

i tried also this


I would appreciate your help. thank you in advance
2

Hello @1739660 ,

The issue with your code seems to be related to the values for cx and cy attributes in the radialGradient definition. Here’s a breakdown of the problem and the corrected code:

Problem:

The values for cx and cy (-294.32, -352.95) are very large and negative. These coordinates are likely outside the SVG viewport (which is 36x36 units in your case) and might be causing the gradient to be rendered off-screen.

Corrected Code:

There are two ways to fix this:

Option 1: Set cx and cy within the SVG viewport:

Option 2: Use gradientTransform to position the gradient:

Explanation of Changes:

  • In both options, we’ve removed the unnecessary scale(.04 -.04) from the gradientTransform.
  • In Option 1, we’ve set cx and cy to values within the SVG viewport (e.g., the center coordinates 18, 18). Adjust the radius (r) based on your desired gradient size.
  • In Option 2, we’ve kept the original cx and cy values but used a translate(18 18) transformation within gradientTransform to position the gradient at coordinates (18, 18).

Additional Tips:

  • Experiment with different values for cx, cy, r, and gradientTransform to achieve the desired gradient placement and size.
  • Use your browser’s developer tools to inspect the rendered SVG and visualize the gradient’s position.

By making these changes, you should be able to see the radial gradient applied to your SVG path. If you encounter further issues, feel free to ask.

3

there was no problem when I saved the code as SVG and tried it in the browser, so I missed the point you mentioned.
Thank you very much for your answer.

4

I tried with the example on this page and the result is the same, so the problem is not in the svg file
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient

radialGradient or fill=“url(‘#myGradient’)” is not working