jsvg icon indicating copy to clipboard operation
jsvg copied to clipboard

Implement remaining filter primitives

Open weisJ opened this issue 1 year ago • 4 comments

  • [x] feComponentTransfer
    • feFuncA
    • feFuncB
    • feFuncG
    • feFuncR
  • [ ] feConvolveMatrix
  • [ ] feDiffuseLighting
  • [x] feDropShadow
  • [ ] feDistantLight
  • [ ] feImage
  • [ ] feMorphology
  • [ ] fePointLight
  • [ ] feSpecularLighting
  • [ ] feSpotLight
  • [ ] feTile

feTile and feImage first require proper handling of filter primitive regions #70.

weisJ avatar Mar 13 '24 11:03 weisJ

I think <feDropShadow> would be a nice addition, as it is a convenient shorthand for commonly used effect. Possibly implemented as translation to existing primitives, as suggested by the spec.

For <feImage> there's the (separate) use case of using SVG fragment as a source: <feImage href="#graphic1" />. It doesn't appear supported by Firefox currently (Bug #455986), but it is handled in Chrome. While there are alternative (more complex) ways to achieve the following, here's an example I would like to share – Have an object cast a shadow only over another one:

filter-mask.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <defs>
    <filter id="shadow-on-graphic1" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
      <feOffset dx="5" dy="10" result="offset-blur" />
      <feImage href="#graphic1" result="graphic1" />
      <feFlood flood-color="black" flood-opacity="0.5" />
      <feComposite in2="offset-blur" operator="in" />
      <feComposite in2="graphic1" operator="in" result="masked-shadow" />
      <feComposite in="SourceGraphic" in2="masked-shadow" operator="over" />
    </filter>
  </defs>

  <rect id="graphic1" x="13" y="13" width="120" height="230" fill="green" />

  <circle cx="110" cy="130" r="70" fill="orange" filter="url(#shadow-on-graphic1)" />

</svg>

Reference image from Batik (after translating hrefxlink:href):

filter-mask-batik

stanio avatar Jun 22 '24 04:06 stanio

It is more likely that I find time to implement feDropShadow. feImage isn't implemented yet due to #70 and layout being rather complicated (preserveAspectRatio makes this messy at the moment).

weisJ avatar Jun 23 '24 20:06 weisJ

feDropShadow is now implemented in the current snapshot.

weisJ avatar Jun 25 '24 08:06 weisJ

Verified with current 1.5.1-SNAPSHOT – feDropShadow is supported.

stanio avatar Jun 25 '24 09:06 stanio