Open IonuDragomir1 opened 3 years ago
unocelli
commented
3 years ago Hi, the linear gradient is currently for the own shape not supported. I should investigate how to add it. on the other hand, personally I find that those line gradient effects on components such as pipes is not very modern...old SCADA style ;)
IonuDragomir1
commented
3 years ago Hi, the linear gradient is currently for the own shape not supported. I should investigate how to add it. on the other hand, personally I find that those line gradient effects on components such as pipes is not very modern...old SCADA style ;)
As I have seen, no object in the library has linear or radial gradient. I consider that gradient gives a 3D and a metallic look and some objects (like pipes) need to have this gradient in order to be differentiated of basic shapes (rectangle, circle, etc; please see the attached photo). Do you have any idea how to start to investigate the implementation of the gradient?
unocelli
commented
3 years ago I fixed that you can import svg image with linear gradient.
gabrielbalinca
commented
3 years ago Hi @unocelli ! I'm pretty sure the op wanted to import the svg to the left menu and not import it as image :)
robsori
commented
3 years ago Yes, how can we implement the gradient property on graphic objects? Do you have an svg file that has this property implemented and that can be included in the graphics library on the left?
unocelli
commented
3 years ago Ok, I propose a deal, you share me or make a PR of the cool svg images library so that I can integrate in FUXA and I extend with the possibility to define shapes as file url ;)
IonuDragomir1
commented
3 years ago In the attached archive you'll find a a small SVG library I've made. I'm interested in keeping that linear/radial gradient when I drop a graphical element from the left menu to editing page. I didn't understand what you meant by "the possibility to define shapes as file url". SVG.zip
IonuDragomir1
commented
3 years ago @unocelli, thank you very much for the latest version! I've noticed that I can import a SVG object as a picture. The problem is that upon the picture no action can be made (change color, blink, hide, show, etc) and if I copy a SVG imported as image, when I paste ('paste' or 'paste in place') the object, it's not displayed at the same size as the original (the pasted object is put in the upper left corner of the screen). As you can see in the attached photo, I have inserted a new category, Valves, in the left menu. When I drag and drop the valve on the MainView, it has no gradient as the one from the right which is a SVG imported as an image. The difference between these two valves is that upon the left one events and actions can be made, but the right one doesn't support any event or action to be made upon it.
Do you have any idea what could I do get the linear gradient for the left valve (the one inserted in the new category)?
unocelli
commented
3 years ago HI, sorry for the delay.
the linear gradient is currently for the own shape not supported. but is comming soon.
if your intention is to change the colour as well, I have to disappoint you because first I have to find a web control to edit linear gradient. the current control used in fuxa does not support it :(
IonuDragomir1
commented
2 years ago Hi,
Do you have any updates on SVG's linear gradient for the own shape? I see that SVGEdit V7 has the possibility of implementing gradient for basic shapes.
As I wrote last year, I'm interested in keeping that linear/radial gradient when I drop a graphical element from the left menu to editing page.
zhang9591
commented
1 year ago I crave this feature
Conger0392
commented
7 months ago Hello,I also have a need for custom shapes and need gradients. After I get the svg graphic from the UI designer, I can see its referenced linearGradient tag through the text editor, and I can use the fill attribute given to the shape tag in the browser's developer tools to fill it, and I can show the corresponding gradient color.
IonuDragomir1
commented
7 months ago Hi,
The problem is that each time you add the svg, it's id is changing. So each time, fill="url(#svg_522d67c4-cbc4451e)" would be different depending on id's value. So there should be a way to pass svg's id dynamically.
Conger0392
commented
7 months ago Hi, The problem is that each time you add the svg, it's id is changing. So each time,
fill="url(#svg_522d67c4-cbc4451e)"would be different depending on id's value. So there should be a way to pass svg's id dynamically.
I define the defs as a file and I reference my.js in index.html under dist. The my.js loads the defs file to render under the svg tag with id svgcontent. At this point the gradient id is fixed. But I'm running into a couple problems: The first is that I need to delay the rendering of the defs in my.js because the svg with id svgcontent has not been generated at the beginning. The second is that I can't render the transform attributes of the g tag
fengchenyu
commented
6 days ago 您好， 您对 SVG 自身形状的线性渐变有任何更新吗？我发现SVGEdit V7 有可能为基本形状实现渐变。 正如我去年所写，当我将图形元素从左侧菜单拖放到编辑页面时，我感兴趣的是保持该线性/径向渐变。
您好， 您对 SVG 自身形状的线性渐变有任何更新吗？我发现SVGEdit V7 有可能为基本形状实现渐变。 正如我去年所写，当我将图形元素从左侧菜单拖放到编辑页面时，我感兴趣的是保持该线性/径向渐变。
I also crave this feature
Hello, I have a SVG which has linearGradient. The SVG code is:
In my Pump.js file, I have tried to display the pump with and without the linear gradient. Without gradient is displayed ok when I drag and drop the graphical object on the editor page. The problem is that when I try to display the linear gradient, this pump ico is not displayed anymore. The js code is:
Do I have to install any additional library, or did I do something wrong in my js file? Many thanks in advance!