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

mask or clip-path clips filter effect outside object bounding box #84

Closed
stanio opened this issue Jun 23, 2024 · 3 comments
Closed

mask or clip-path clips filter effect outside object bounding box #84

stanio opened this issue Jun 23, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@stanio
Copy link

stanio commented Jun 23, 2024

filter-mask.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <defs>
    <filter id="drop-shadow" x="0" y="0">
      <?feDropShadow dx="5" dy="10" stdDeviation="2" flood-opacity="0.5" ?>
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
      <feOffset dx="5" dy="10" result="offset-blur" />
      <feFlood flood-color="black" flood-opacity="0.5" />
      <feComposite in2="offset-blur" operator="in" />
      <!--feComposite in="SourceGraphic" operator="over" /-->
    </filter>
    <filter id="white-fill" x="0" y="0" width="1" height="1">
      <feFlood flood-color="white" />
      <feComposite in2="SourceAlpha" operator="in" />
    </filter>
    <mask id="graphic1-mask" x="0" y="0">
      <use href="#graphic1" filter="url(#white-fill)" />
    </mask>
    <clipPath id="graphic1-clip">
      <use href="#graphic1" />
    </clipPath>
  </defs>

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

  <!--use href="#graphic2" filter="url(#drop-shadow)" clip-path="url(#graphic1-clip)" /-->
  <use href="#graphic2" filter="url(#drop-shadow)" mask="url(#graphic1-mask)" />

  <circle id="graphic2" cx="120" cy="110" r="70" fill="orange" />
  <!--g id="graphic2">
    <rect x="50" y="40" width="160" height="160" opacity="0" />
    <circle cx="120" cy="110" r="70" fill="orange" />
  </g-->

</svg>
Actual Expected
actual expected

I speculate it is a kind of optimization (related to #65 ?), as artificially extending the object bounds, including a bigger fully transparent geometry, works around the problem:

  <use href="#graphic2" filter="url(#drop-shadow)" mask="url(#graphic1-mask)" />

  <!--circle id="graphic2" cx="120" cy="110" r="70" fill="orange" /-->
  <g id="graphic2">
    <rect x="50" y="40" width="160" height="160" opacity="0" />
    <circle cx="120" cy="110" r="70" fill="orange" />
  </g>

I had initially tried changing the width and height of filters and masks to much > 100% but observed no effect.

weisJ added a commit that referenced this issue Jun 24, 2024
@weisJ weisJ added the bug Something isn't working label Jun 24, 2024
@weisJ
Copy link
Owner

weisJ commented Jun 25, 2024

Should be fixed in current snapshot

@stanio
Copy link
Author

stanio commented Jun 25, 2024

Tested with current 1.5.1-SNAPSHOT – fixed. Thank you very much!

@weisJ
Copy link
Owner

weisJ commented Jul 16, 2024

Now available in 1.6.0

@weisJ weisJ closed this as completed Jul 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants