Dear developer,
I would like to report a possible issue of SVG path.
When we set a gradient texture (horizontal, vertical, radial, or sweep gradients) on an SVG path shape, it doesn’t work. It works with other types of the Shape elements, but not the SVG path. The SVG path is a closed path, so it should be able to be filled with color.
I would like to why does it not work and is there any solution?
I need the gradient texture can be applied to an SVG path shape.
Thank you for any responses.
I can’t seem to reproduce this issue. Can you test this with the path’s default value? Also, make sure that you have the latest version installed.
I tested the default value of the path, the gradient texture shows. However it seems it doesn’t work for the value from an SVG file.
Can you share the values you’re having trouble with so we can try to reproduce your issue?
Here’s the SVG path I’m using, which cannot be filled with gradient texture:
M146.286 822.857
v109.714
c0 10.286-8 18.286-18.286 18.286
h-109.714
c-10.286 0-18.286-8-18.286-18.286
v-109.714
c0-10.286 8-18.286 18.286-18.286
h109.714
c10.286 0 18.286 8 18.286 18.286
z
M365.714 749.714
v182.857
c0 10.286-8 18.286-18.286 18.286
h-109.714
c-10.286 0-18.286-8-18.286-18.286
v-182.857
c0-10.286 8-18.286 18.286-18.286
h109.714
c10.286 0 18.286 8 18.286 18.286
z
M585.143 603.429
v329.143
c0 10.286-8 18.286-18.286 18.286
h-109.714
c-10.286 0-18.286-8-18.286-18.286
v-329.143
c0-10.286 8-18.286 18.286-18.286
h109.714
c10.286 0 18.286 8 18.286 18.286
z
M804.571 384
v548.571
c0 10.286-8 18.286-18.286 18.286
h-109.714
c-10.286 0-18.286-8-18.286-18.286
v-548.571
c0-10.286 8-18.286 18.286-18.286
h109.714
c10.286 0 18.286 8 18.286 18.286
z
M1024 91.429
v841.143
c0 10.286-8 18.286-18.286 18.286
h-109.714
c-10.286 0-18.286-8-18.286-18.286
v-841.143
c0-10.286 8-18.286 18.286-18.286
h109.714
c10.286 0 18.286 8 18.286 18.286
z
Thank you.
I tried it (just took one of the rectangles) and indeed, gradient fill is not working.
I also tried to go with numbers without the decimals, but that wouldn’t fill correctly either.
Can’t reproduce it in other shapes, so one of the elements you used is probably messing it up…
Maybe the control points of the bezier curves somehow?
Did you try with a quad curve?
No, I didn’t try a quad curve.
I have a question on the SVG path by the way.
What is the right way to write an SVG path? I saw some paths are written as a pair of coordinate (… , …) and some others are using space and dash (like the example I sent).
Thank you.
As far as I know both comma and space work, but I myself find it easier to read with the comma’s.
I think you already know, but you can try out your code here
They also explain what each thing you type in does, so that helps sometimes and you can also check that comma and space in the coordinates does the same thing.
Awesome! Thanks.
