Shadow Color Support in SVG

[hellomaya]

Currently fabricjs didn't support shadow color in SVG, I recommended that you can check this example:

    <feOffset dx="4.964285714285714" dy="2.482142857142857" result="offsetblur"></feOffset>
<feFlood flood-color="green"/>
<feComposite in2="offsetblur" operator="in"/>

[asturur]

I tried lot of tecnics to get shadow colors, when i adjust shadow intensity.
i could not get it properly.

Please consider problem with overlapping shapes, i do not really remind where did i hit the wall.

Can you post a full sgv shadow with color other than a fragment?

[hellomaya]

Of cause, here it is :

<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1984.2519685039372" height="1446.8503937007874" style="background-color: white" viewBox="0 0 834 608.125" xml:space="preserve"><desc>Created with Fabric.js 1.4.13</desc><defs></defs><g transform="translate(384.5 236.5)">
<filter id="SVGID_3" y="-21.083905177791642%" height="142.1678103555833%" x="-20.878634639696585%" width="141.75726927939317%" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="1.2410714285714286"></feGaussianBlur>
    <feOffset dx="4.964285714285714" dy="2.482142857142857" result="offsetblur"></feOffset>
<feFlood flood-color="green"/>
<feComposite in2="offsetblur" operator="in"/>
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

<rect x="-282.5" y="-114.5" rx="0" ry="0" width="565" height="229" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #D2F1FC; fill-rule: nonzero; opacity: 0.6;filter: url(#SVGID_3);" transform="translate(-0.13 0)"/>
<polygon points="-282.5 57.25,0 -57.25,282.5 57.25" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #B2FF80; fill-rule: nonzero; opacity: 0.6;" transform="translate(-0.13 55.25)"/><defs><filter id="SVGID_4"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" result="A"/><feColorMatrix in="A" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" result="B"/><feColorMatrix in="B" type="matrix" values="0.30 0.30 0.30 0 0 0.25 0.25 0.25 0 0 0.20 0.20 0.20 0 0 0.00 0.00 0.00 1 0"  /></filter></defs><defs><clipPath id="SVGID_5"><rect x="-283.1288941174013" y="-115" width="566" height="230" /></clipPath></defs><g transform="translate(0.13 0)">
</g>
</g>
</svg>

[hellomaya]

It supposed to be an image in it, and I removed it, but leaved clip path, it's a group, with one rectangle, one triangle, and one image, and the image only displayed in part of with clip path, I changed fabricjs to add clipPath too, anyway.

[asturur]

I ll try as soon as new version is out.
I put in hold for now.
Thanks for idea, i tried but never got it good. I think i tried also feFlood and stuck in some problem. I'll tell you.

[hellomaya]

No problem, I am looking forward the progress 👍

[asturur]

the reason why clippath support is not added in fabricjs yet is beacuse i could not correctly clip with:

• multiple clip path using either nonzero AND even-odd clip-rule, that is not replicable in canvas.
  (while fill-rule is currently supported)
• clip by complex objects

if you mind to share what you did i'll take every avantage from it.

[hellomaya]

We used clipTo to clip image object in a group, and I only added clip-path attribute of SVG element style to image, so I can get part of image object, because clipTo support clip an object with rectangle, so it's easy to add this to image.class.js, you can see clip-path element is,

<clipPath id="SVGID_5"><rect x="-283.1288941174013" y="-115" width="566" height="230" /></clipPath>
<image ... style='clip-path:url(#clipPath);...
....
el.clipTo = function (ctx) {return ctx.rect(x, y, width, height);}

Until now I only used this one. But clipTo do support different type of clip, so you might need to check <clipPath> for more information...

Another problem is here x, y, width, height, they are not belong to fabricjs object attributes, we added custom extra attributes to the object to revolve that, in fabricjs, might be another new attribute (similar to gradient or shadow realization), but you will have better solution, I believe.