Implement gradients (linear) for svg output

[Kienz]

I'm actual try to implement gradients for svg output. About that i have some questions:

• I have problem with unique id's - i need them to reference elements in svg. It would be helpful if every object has a unique id (also paths in a PathGroup). Do you have any ideas?
• Do you have some tips about the difference between fabric gradients and svg gradients?
• I also have a problem with gradients createt from svg file (fabric.Path) and e.g. rectangle (setGradientFill). Both normalize rendering point with _convertPercentUnitsToValues. But if i use SVG and revert this normalization, fabric.Path works correct, fabric.Rect is not working (if the values for fabric.Rect gradient not changed it works.) Have you an ideas for that problem?
• Do you have any other tips?
• I have a problem with the colorStops object if more than 2 defined (e.g. {0: "#e9939d", 1: "#d31510", 0.5: "#db58c7"}) - How can i loop through this object, that the colorStops sorted correctly (0, 0.5, 1)?

Tanks a lot.

[kangax]

Hey @Kienz

I have problem with unique id's - i need them to reference elements in svg. It would be helpful if every object has a unique id (also paths in a PathGroup). Do you have any ideas?

For SVG ids, there was this pull request once. But take a look at the comments — SVG id's are different from unique ids that we might want to have in Fabric. So I'm not yet sure what to do about that. Why do you need to reference elements by id in SVG?

Do you have some tips about the difference between fabric gradients and svg gradients?

Can't say offhand about difference. But we're using same syntax (x1,y1, x2, y2, colorStops). So I imagine we could just create gradient definition using colorStops:

<defs>
  <linearGradient id="MyGradient">
    <stop offset="5%" stop-color="#F60" />
    <stop offset="95%" stop-color="#FF6" />
  </linearGradient>
</defs>

and then make sure object references that gradient:

<rect fill="url(#MyGradient)" x="100" y="100" width="600" height="200" />

I also have a problem with gradients createt from svg file (fabric.Path) and e.g. rectangle (setGradientFill). Both normalize rendering point with _convertPercentUnitsToValues. But if i use SVG and revert this normalization, fabric.Path works correct, fabric.Rect is not working (if the values for fabric.Rect gradient not changed it works.) Have you an ideas for that problem?

Can't say what the problem with rect and gradient without looking closer into it

I have a problem with the colorStops object if more than 2 defined (e.g. {0: "#e9939d", 1: "#d31510", 0.5: "#db58c7"}) - How can i loop through this object, that the colorStops sorted correctly (0, 0.5, 1)?

But do they need to be sorted? If you specify percentage values, then I don't see why the order should matter:

<stop offset="5%" stop-color="blue" />
<stop offset="90%" stop-color="green" />
<stop offset="50%" stop-color="red" />

[Kienz]

Hey @kangax,

Why do you need to reference elements by id in SVG?

To set the id attribute of the gradient in the svg and to reference it in the fill attribute of the svg element.

But do they need to be sorted? If you specify percentage values, then I don't see why the order should matter:

Ok, i'm looking into it - actual i don't use percentage values.

Thanks!

[kangax]

Wouldn't it be possible to just generate unique id for gradient? Probably in fabric.Canvas#toSVG.

[Kienz]

I think that would also be possible. But i think the unique id have to be generated in fabric.Object#toSVG because i need the id for the fill attribute.

[Kienz]

But do they need to be sorted? If you specify percentage values, then I don't see why the order should matter:

I look into that and found out, that the offset values must be sorted. http://www.w3.org/TR/SVG/pservers.html#StopElementOffsetAttribute "Each gradient offset value is required to be equal to or greater than the previous gradient stop's offset value. If a given gradient stop's offset value is not equal to or greater than all previous offset values, then the offset value is adjusted to be equal to the largest of all previous offset values."

Example file: https://s3-eu-west-1.amazonaws.com/kienzle.geschaeft/projects/sketch/fabric_svg_linear_gradient_offsets.svg

[kangax]

Something like this should work:

var flat = [ ]; 

for (var position in colorStops) { 
  flat.push({ 
    pos: position, 
    val: colorStops[position]
  });
}; 

flat.sort(function(a, b) {
  return a.pos - b.pos
});

[Kienz]

Do you have any ideas how to implement getUID?

[kangax]

For numeric, unique id, we would need to have something like fabric.Object.__uid = 0 then in object creation, this.id = fabric.Object.__uid++