I have a layer in my design that I would like to be semi transparent. This would be an SVG with a single path with a solid color that gets added via a design. This allows the user to then set a color for fill. Since the FPD doesn't currently respect (for a design at least) SVG layer opacity or its fill-opacity values when loading in an image; requiring the user to set the opacity themselves with the color picker tool. Also, I'm using designs because these layers are optional and do not follow the same bounding box restrictions I give to the customers.
While that alone is fine for a single image on ONE view, it requires the customer to set opacity manually (if they can figure out how) when it is added to the view. However, I also have these elements using Replace In all Views AND using a color link group.
If the Color Link group is the only option turned on, FPD does successfully transfer the color to the other views, but it does not transfer the opacity along with it.
If replace is turned on, the element gets successfully replaced when added to another view, but it then goes back to its default opacity setting (100%), again, ignoring the opacity configured within the SVG or later configured by the user.
I suppose this is a few requests that can boil down to this:
Support SVG style="opacity:xx%" or style="fill-opacity:XX%" (fill opacity being best in my opinion)Color Link Groups Support sending along Opacity Replacement group retains Opacity setting or can copy from new element on view?( it seems to me like it retains position already, which I find hard to configure)A setting to default all properties when replacing? If we supported #1, I could get away with configuring the SVG to have the proper opacity and wouldnt need the color link group to send along opacity
If we supported #2, I still require the customer to figure out how to set opacity, but other views will get the proper colors / opacity when the element gets replaced with a proper SVG
I've attached a sample file to show the different opacity options, created with inkscape,
I've also attached the file I intended to use on my product called colorbar, It would be used as a transparent overlay on my customers background image.
Yet Another Tech posted
about 5 years ago
Best Answer
I was finally able to cheat FPD into giving me what I wanted in the designer by creating a tailored SVG and setting some properties in the database which FPD is not capable of setting.
It seems to me like I'm not able to set a transparent background for a part of my svg path with the basic color picker ( no advanced editing ). To accomplish my task, I created an svg with two paths, one for the background and one for the foreground. I read through the fancyProductDesigner.addElement function to understand how fill was getting set and found svgFill. To get the transparent background, I read the SVG specs for the fill property and paint parameter that fill takes.
Specifically I used the following argument type <url> [none | <color>]?
A URL reference to a paint server element, which is an element that defines a paint server: ‘linearGradient’, ‘pattern’ and ‘radialGradient’, optionally followed by a fall-back value that is used if the paint server reference cannot be resolved.
We did this because the documentation mentions that we can set a background fallback color in the event we specify a bad URL for the paint server element:
A <paint> allows a paint server reference, to be optionally followed by a <color> or the keyword none. When this optional value is given, the <color> value or the value none is a fallback value to use if the paint server reference in the layer is invalid (due to pointing to an element that does not exist or which is not a valid paint server).
I then intentionally created a bad reference so that i would successfully fall back to a transparent background if we try to set it. Additionally, I specified an opacity of 0 for the layer.
Defaulting Opacity: Since I was unable to have the design tool read my opacity, I read through the FPD.js file and some Documentation on fabric.js. In the FancyProductDesigner.addElement method, I noticed it was passing parameters it was uninterested in all the way through to Fabric to finally do the work via the _fabricImageLoaded method. Since I'm using Design specific configuration options, I simply added the opacity=.75 parameter into the `wp_postmeta` where meta_key = `fpd_parameters` entry for the relevant design.
I was finally able to cheat FPD into giving me what I wanted in the designer by creating a tailored SVG and setting some properties in the database which FPD is not capable of setting.
It seems to me like I'm not able to set a transparent background for a part of my svg path with the basic color picker ( no advanced editing ). To accomplish my task, I created an svg with two paths, one for the background and one for the foreground. I read through the fancyProductDesigner.addElement function to understand how fill was getting set and found svgFill. To get the transparent background, I read the SVG specs for the fill property and paint parameter that fill takes.
Specifically I used the following argument type <url> [none | <color>]?
A URL reference to a paint server element, which is an element that defines a paint server: ‘linearGradient’, ‘pattern’ and ‘radialGradient’, optionally followed by a fall-back value that is used if the paint server reference cannot be resolved.
We did this because the documentation mentions that we can set a background fallback color in the event we specify a bad URL for the paint server element:
A <paint> allows a paint server reference, to be optionally followed by a <color> or the keyword none. When this optional value is given, the <color> value or the value none is a fallback value to use if the paint server reference in the layer is invalid (due to pointing to an element that does not exist or which is not a valid paint server).
I then intentionally created a bad reference so that i would successfully fall back to a transparent background if we try to set it. Additionally, I specified an opacity of 0 for the layer.
Defaulting Opacity: Since I was unable to have the design tool read my opacity, I read through the FPD.js file and some Documentation on fabric.js. In the FancyProductDesigner.addElement method, I noticed it was passing parameters it was uninterested in all the way through to Fabric to finally do the work via the _fabricImageLoaded method. Since I'm using Design specific configuration options, I simply added the opacity=.75 parameter into the `wp_postmeta` where meta_key = `fpd_parameters` entry for the relevant design.
I have a layer in my design that I would like to be semi transparent. This would be an SVG with a single path with a solid color that gets added via a design. This allows the user to then set a color for fill. Since the FPD doesn't currently respect (for a design at least) SVG layer opacity or its fill-opacity values when loading in an image; requiring the user to set the opacity themselves with the color picker tool. Also, I'm using designs because these layers are optional and do not follow the same bounding box restrictions I give to the customers.
While that alone is fine for a single image on ONE view, it requires the customer to set opacity manually (if they can figure out how) when it is added to the view. However, I also have these elements using Replace In all Views AND using a color link group.
If the Color Link group is the only option turned on, FPD does successfully transfer the color to the other views, but it does not transfer the opacity along with it.
If replace is turned on, the element gets successfully replaced when added to another view, but it then goes back to its default opacity setting (100%), again, ignoring the opacity configured within the SVG or later configured by the user.
I suppose this is a few requests that can boil down to this:
Support SVG style="opacity:xx%" or style="fill-opacity:XX%" (fill opacity being best in my opinion)Color Link Groups Support sending along Opacity
Replacement group retains Opacity setting or can copy from new element on view?( it seems to me like it retains position already, which I find hard to configure)A setting to default all properties when replacing?
If we supported #1, I could get away with configuring the SVG to have the proper opacity and wouldnt need the color link group to send along opacity
If we supported #2, I still require the customer to figure out how to set opacity, but other views will get the proper colors / opacity when the element gets replaced with a proper SVG
I've attached a sample file to show the different opacity options, created with inkscape,
I've also attached the file I intended to use on my product called colorbar, It would be used as a transparent overlay on my customers background image.
Attachments (2)
colorbar-tra....svg
843 Bytes
svg-opacity-....svg
8.54 KB
0 Votes
Yet Another Tech posted about 5 years ago Best Answer
I was finally able to cheat FPD into giving me what I wanted in the designer by creating a tailored SVG and setting some properties in the database which FPD is not capable of setting.
It seems to me like I'm not able to set a transparent background for a part of my svg path with the basic color picker ( no advanced editing ). To accomplish my task, I created an svg with two paths, one for the background and one for the foreground. I read through the fancyProductDesigner.addElement function to understand how fill was getting set and found svgFill. To get the transparent background, I read the SVG specs for the fill property and paint parameter that fill takes.
Specifically I used the following argument type <url> [none | <color>]?
<rect style="opacity:0;fill:url(#missing) none;fill-opacity:0;stroke:none;" height="203.2" width="203.2" id="rect7" />Defaulting Opacity:
Since I was unable to have the design tool read my opacity, I read through the FPD.js file and some Documentation on fabric.js. In the FancyProductDesigner.addElement method, I noticed it was passing parameters it was uninterested in all the way through to Fabric to finally do the work via the _fabricImageLoaded method.
Since I'm using Design specific configuration options, I simply added the opacity=.75 parameter into the `wp_postmeta` where meta_key = `fpd_parameters` entry for the relevant design.
Attachments (1)
colorbar.svg
1.72 KB
0 Votes
1 Comments
Yet Another Tech posted about 5 years ago Answer
I was finally able to cheat FPD into giving me what I wanted in the designer by creating a tailored SVG and setting some properties in the database which FPD is not capable of setting.
It seems to me like I'm not able to set a transparent background for a part of my svg path with the basic color picker ( no advanced editing ). To accomplish my task, I created an svg with two paths, one for the background and one for the foreground. I read through the fancyProductDesigner.addElement function to understand how fill was getting set and found svgFill. To get the transparent background, I read the SVG specs for the fill property and paint parameter that fill takes.
Specifically I used the following argument type <url> [none | <color>]?
<rect style="opacity:0;fill:url(#missing) none;fill-opacity:0;stroke:none;" height="203.2" width="203.2" id="rect7" />Defaulting Opacity:
Since I was unable to have the design tool read my opacity, I read through the FPD.js file and some Documentation on fabric.js. In the FancyProductDesigner.addElement method, I noticed it was passing parameters it was uninterested in all the way through to Fabric to finally do the work via the _fabricImageLoaded method.
Since I'm using Design specific configuration options, I simply added the opacity=.75 parameter into the `wp_postmeta` where meta_key = `fpd_parameters` entry for the relevant design.
Attachments (1)
colorbar.svg
1.72 KB
0 Votes
Login or Sign up to post a comment