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.
I finally figured it out why my SVG Path shape didn’t show the gradient color.
KLWP did apply the gradient color to the shape. Why it didn’t show up is because of the difference between the shape size (dimension) and the path size (dimension).
In order to be able to show the gradient color, we need to have an SVG Path with a size of 1.5× of the shape size. Let say we create a 80×80 shape in a preset, so we need an SVG Path with a size of 120×120 pixels (120 is equal to 80 multiplied by 1.5).
In reverse, let say we have an SVG Path in 240×240 pixels, so we have to create a shape in the preset with its size set to 160×160 (160 is equal to 240 divided by 1.5).
I attach the screenshots from my investigation, we can see that the SVG path shape is now showing gradient color.
Hope this helps everyone else who has a similar issue with gradient texture in SVG Path shape.
That looks really nice!
Which shape are you talking about? And why does it need to be smaller?
Hi there,
It’s the SVG path shape. The size of small because I just want it as an icon.
This topic was automatically closed 25 days after the last reply. New replies are no longer allowed.
