Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement remaining filter primitives #72

Open
2 of 11 tasks
weisJ opened this issue Mar 13, 2024 · 4 comments
Open
2 of 11 tasks

Implement remaining filter primitives #72

weisJ opened this issue Mar 13, 2024 · 4 comments
Labels
enhancement New feature or request

Comments

@weisJ
Copy link
Owner

weisJ commented Mar 13, 2024

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

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

@weisJ weisJ added the enhancement New feature or request label Mar 13, 2024
@stanio
Copy link

stanio commented Jun 22, 2024

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

@weisJ
Copy link
Owner Author

weisJ commented Jun 23, 2024

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
Copy link
Owner Author

weisJ commented Jun 25, 2024

feDropShadow is now implemented in the current snapshot.

@stanio
Copy link

stanio commented Jun 25, 2024

Verified with current 1.5.1-SNAPSHOT – feDropShadow is supported.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants