0

I have an svg with linear gradient:

 <svg>
            <g clipPath="...">
                <path fill="url(1)") />
            </g>
            <defs>
                <linearGradient id="1">
                   ....
                </linearGradient>
                <clipPath id="1">
                    ....
                </clipPath>
            </defs>
        </svg>

Is there another way to fill the path tag with a linear gradient or the code inside the defs tag every time is required?

Asking
  • 3,487
  • 11
  • 51
  • 106
  • you may try to use the image of a gradient. In this case you may need to clip the image with the path or use it as a pattern. – enxaneta Oct 03 '22 at 17:29
  • @enxaneta, could you give please an example? – Asking Oct 03 '22 at 17:33
  • Why would you want another way? What's wrong with the one the SVG specification defines? – Robert Longson Oct 03 '22 at 17:44
  • This is an example of a path "filled" with an image: https://stackoverflow.com/questions/56109644/how-to-do-image-clipping-by-using-svg-shapes/56113424#56113424. Now imagine that instead of the image of the dog you have an image of a gradient like this one: https://img.freepik.com/free-vector/vibrant-summer-ombre-background-vector_53876-105765.jpg – enxaneta Oct 03 '22 at 17:45
  • @RobertLongson, my issues is: `id attribute value must be unique` when i add many times my React Js component that contains the svg. Do you know a solution for that without external library? – Asking Oct 04 '22 at 06:54
  • @enxaneta, but how to avoid the issue when i add a component that contains that svh and the ID are the same on the page. How to avoid this? – Asking Oct 04 '22 at 06:55
  • add the svg via an object tag or iframe and make the svg a data url. Then it doesn't need to be unique. What's the problem with generating a unique value anyway though? You can generate a guid easily enough. – Robert Longson Oct 04 '22 at 07:07

0 Answers0