FUXA
FUXA copied to clipboard
frangoteam
How to implement SVG's linear gradient on graphical object?
Hello, I have a SVG which has linearGradient. The SVG code is:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 112.5 75.377" enable-background="new 0 0 112.5 75.377" xml:space="preserve">
<g id="Group_Volute_Chamber">
<path fill="#7F7F7F" stroke="#4C4C4C" stroke-width="0.25" d="M86.4,27.226h26.1V3.151H52.2l-3.6,0.225L45,3.826l-3.6,0.9 l-3.15,1.35l-3.15,1.35l-3.15,1.8l-2.7,2.25l-2.475,2.25L24.3,16.201l-2.025,2.925l-1.8,2.925l-1.575,3.15l-1.35,3.375l-0.9,3.375 l-0.45,3.6l-0.225,3.601l0.225,3.601l0.45,3.601l0.9,3.601l1.35,3.375l1.575,3.149l1.8,2.926l2.025,2.699l2.475,2.699l2.475,2.25 l2.7,2.25l3.15,1.801l3.15,1.351l3.15,1.35l3.6,0.9l3.6,0.45l3.6,0.225l3.6-0.225l3.601-0.45l3.601-0.9l3.149-1.35l3.149-1.351 l3.15-1.801l2.7-2.25l2.699-2.25l2.25-2.699l2.024-2.699l1.8-2.926l1.575-3.149l1.351-3.375l0.899-3.601l0.45-3.601l0.225-3.601 l-0.225-4.5l-0.676-3.15l-0.676-2.925L86.4,27.226z" />
</g>
<g id="Group_Upstream_Pipe_Flange">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="82.3506" y1="50.1758" x2="82.3506" y2="70.2012" gradientTransform="matrix(1 0 0 -1 0 75.377)">
<stop offset="0.01" style="stop-color:#4D4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_1_)" d="M52.2,5.176h60.3v20.025H52.2V5.176z" />
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="108.4502" y1="45.2256" x2="108.4502" y2="75.376" gradientTransform="matrix(1 0 0 -1 0 75.377)">
<stop offset="0.01" style="stop-color:#4D4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#4C4C4C" stroke-width="0.25" d="M104.4,0.001h8.1v30.15h-8.1V0.001" />
</g>
<g id="Group_Drivershaft_Flange">
<radialGradient id="SVGID_3_" cx="52.2002" cy="36.2261" r="34.2" gradientTransform="matrix(1 0 0 -1 0 75.377)" gradientUnits="userSpaceOnUse">
<!-- --> <stop offset="0" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#666666" />
</radialGradient>
<circle fill="url(#SVGID_3_)" cx="52.2" cy="39.151" r="34.2" />
</g>
<g id="Group_Downstream_Pipe_Flange">
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="36.2246" y1="24.0762" x2="36.2246" y2="48.1509" gradientTransform="matrix(1 0 0 -1 0 75.377)">
<stop offset="0.01" style="stop-color:#4D4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#4C4C4C" stroke-width="0.25" d="M8.1,27.226h44.1l2.475,0.225l2.25,0.675l2.025,1.125 l1.8,1.575l1.575,1.8l1.125,2.025l0.675,2.25l0.225,2.475l-0.225,2.475l-0.675,2.25l-1.125,2.025l-1.575,1.575l-1.8,1.575 l-2.025,1.125l-2.25,0.675L52.2,51.301H8.1" />
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="4.0503" y1="20.9258" x2="4.0503" y2="51.0767" gradientTransform="matrix(1 0 0 -1 0 75.377)">
<stop offset="0.01" style="stop-color:#4D4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_5_)" stroke="#4C4C4C" stroke-width="0.25" d="M0,24.301h8.1v30.15H0V24.301" />
</g>
</svg>
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:
(function () {
'use strict';
var shapesGroupName = 'editor.shapeAEG'; // used to organize and gropping the shapes, displayed in editor menu as label with expand/collapse
var typeId = 'proceng';
var shapes = [
//this is how the pump is displayed but without gradient:
{
name: 'pump', ico: 'assets/lib/svgeditor/shapes/img/pump.svg', content: [
{ id: '', type: 'path', attr: { d: 'M86.4,27.226h26.1V3.151H52.2l-3.6,0.225L45,3.826l-3.6,0.9 l-3.15,1.35l-3.15,1.35l-3.15,1.8l-2.7,2.25l-2.475,2.25L24.3,16.201l-2.025,2.925l-1.8,2.925l-1.575,3.15l-1.35,3.375l-0.9,3.375 l-0.45,3.6l-0.225,3.601l0.225,3.601l0.45,3.601l0.9,3.601l1.35,3.375l1.575,3.149l1.8,2.926l2.025,2.699l2.475,2.699l2.475,2.25 l2.7,2.25l3.15,1.801l3.15,1.351l3.15,1.35l3.6,0.9l3.6,0.45l3.6,0.225l3.6-0.225l3.601-0.45l3.601-0.9l3.149-1.35l3.149-1.351 l3.15-1.801l2.7-2.25l2.699-2.25l2.25-2.699l2.024-2.699l1.8-2.926l1.575-3.149l1.351-3.375l0.899-3.601l0.45-3.601l0.225-3.601 l-0.225-4.5l-0.676-3.15l-0.676-2.925L86.4,27.226z' } },
{ id: '', type: 'path', attr: { d: 'M52.2,5.176h60.3v20.025H52.2V5.176z' } },
{ id: '', type: 'path', attr: { d: 'M104.4,0.001h8.1v30.15h-8.1V0.001' } },
{id: '', type: 'circle', attr: {fill:'#4C4C4C', stroke:'#4C4C4C', cx:'52.20', cy:'39.151', r:'34.2' } },
{ id: '', type: 'path', attr: { d: 'M8.1,27.226h44.1l2.475,0.225l2.25,0.675l2.025,1.125 l1.8,1.575l1.575,1.8l1.125,2.025l0.675,2.25l0.225,2.475l-0.225,2.475l-0.675,2.25l-1.125,2.025l-1.575,1.575l-1.8,1.575 l-2.025,1.125l-2.25,0.675L52.2,51.301H8.1' } },
{ id: '', type: 'path', attr: { d: 'M0,24.301h8.1v30.15H0V24.301' } }
]
},
// this way it doesn't display neither the icon in the left meniu:
{
name: 'pump', ico: 'assets/lib/svgeditor/shapes/img/pump.svg', content: [
{ id: '', type: 'path', attr: { d: 'M86.4,27.226h26.1V3.151H52.2l-3.6,0.225L45,3.826l-3.6,0.9 l-3.15,1.35l-3.15,1.35l-3.15,1.8l-2.7,2.25l-2.475,2.25L24.3,16.201l-2.025,2.925l-1.8,2.925l-1.575,3.15l-1.35,3.375l-0.9,3.375 l-0.45,3.6l-0.225,3.601l0.225,3.601l0.45,3.601l0.9,3.601l1.35,3.375l1.575,3.149l1.8,2.926l2.025,2.699l2.475,2.699l2.475,2.25 l2.7,2.25l3.15,1.801l3.15,1.351l3.15,1.35l3.6,0.9l3.6,0.45l3.6,0.225l3.6-0.225l3.601-0.45l3.601-0.9l3.149-1.35l3.149-1.351 l3.15-1.801l2.7-2.25l2.699-2.25l2.25-2.699l2.024-2.699l1.8-2.926l1.575-3.149l1.351-3.375l0.899-3.601l0.45-3.601l0.225-3.601 l-0.225-4.5l-0.676-3.15l-0.676-2.925L86.4,27.226z' } },
{ id: '', type: 'linearGradient', attr: { gradientUnits: 'userSpaceOnUse', x1='82.3506', y1='50.1758', x2='82.3506', y2='70.2012', gradientTransform='matrix(1 0 0 -1 0 75.377)' } },
{ id: '', type: 'stop', attr: { offset: '0.01', style='stop-color:#4D4D4D'} },
{ id: '', type: 'stop', attr: { offset: '0.51', style='stop-color:#F5F5F5'} },
{ id: '', type: 'stop', attr: { offset: '1', style='stop-color:#4D4D4D'} },
{ id: '', type: 'path', attr: { d: 'M52.2,5.176h60.3v20.025H52.2V5.176z' } },
{ id: '', type: 'linearGradient', attr: { gradientUnits: 'userSpaceOnUse', x1='108.4502', y1='45.2256', x2='108.4502', y2='75.376', gradientTransform='matrix(1 0 0 -1 0 75.377)' } },
{ id: '', type: 'stop', attr: { offset: '0.01', style='stop-color:#4D4D4D'} },
{ id: '', type: 'stop', attr: { offset: '0.51', style='stop-color:#F5F5F5'} },
{ id: '', type: 'stop', attr: { offset: '1', style='stop-color:#4D4D4D'} },
{ id: '', type: 'path', attr: { d: 'M104.4,0.001h8.1v30.15h-8.1V0.001' } },
{ id: '', type: 'radialGradient', attr: { gradientUnits: 'userSpaceOnUse', cx='52.2002', cy='36.2261', r='34.2', gradientTransform='matrix(1 0 0 -1 0 75.377)' } },
{ id: '', type: 'stop', attr: { offset: '0', style='stop-color:#F5F5F5'} },
{ id: '', type: 'stop', attr: { offset: '0.51', style='stop-color:#666666'} },
{id: '', type: 'cicle', attr: { cx:'52.20', cy:'39.151', r:'34.2' } },
{ id: '', type: 'linearGradient', attr: { gradientUnits: 'userSpaceOnUse', x1='36.2246', y1='24.0762', x2='36.2246', y2='48.1509', gradientTransform='matrix(1 0 0 -1 0 75.377)' } },
{ id: '', type: 'stop', attr: { offset: '0.01', style='stop-color:#4D4D4D'} },
{ id: '', type: 'stop', attr: { offset: '0.51', style='stop-color:#F5F5F5'} },
{ id: '', type: 'stop', attr: { offset: '1', style='stop-color:#4D4D4D'} },
{ id: '', type: 'path', attr: { d: 'M8.1,27.226h44.1l2.475,0.225l2.25,0.675l2.025,1.125 l1.8,1.575l1.575,1.8l1.125,2.025l0.675,2.25l0.225,2.475l-0.225,2.475l-0.675,2.25l-1.125,2.025l-1.575,1.575l-1.8,1.575 l-2.025,1.125l-2.25,0.675L52.2,51.301H8.1' } },
{ id: '', type: 'linearGradient', attr: { gradientUnits: 'userSpaceOnUse', x1='4.0503', y1='20.9258', x2='4.0503', y2='51.0767', gradientTransform='matrix(1 0 0 -1 0 75.377)' } },
{ id: '', type: 'stop', attr: { offset: '0.01', style='stop-color:#4D4D4D'} },
{ id: '', type: 'stop', attr: { offset: '0.51', style='stop-color:#F5F5F5'} },
{ id: '', type: 'stop', attr: { offset: '1', style='stop-color:#4D4D4D'} },
{ id: '', type: 'path', attr: { d: 'M0,24.301h8.1v30.15H0V24.301' } },
]
}];
for (var i = 0; i < shapes.length; i++) {
shapes[i].name = typeId + '-' + shapes[i].name;
}
if (svgEditor.shapesGrps[shapesGroupName]) {
for (var i = 0; i < shapes.length; i++) {
svgEditor.shapesGrps[shapesGroupName].push(shapes[i]);
}
} else {
svgEditor.shapesGrps[shapesGroupName] = shapes;
}
}());
Do I have to install any additional library, or did I do something wrong in my js file? Many thanks in advance!
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 ;)
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?
Hi @unocelli ! I'm pretty sure the op wanted to import the svg to the left menu and not import it as image :)
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?
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 ;)
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
@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)?
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 :(
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.
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.
Now is there any way I can load the defs tag into the FUXA,at which point I can reference the linearGradient tag with id svg_522d67c4-cbc4451e directly in the image
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.
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