Designer: Masking the Shadow Layer Effect

[Tomeric]

I'd like to use the "Shadow"-layer effect on an object but without having this object filled so that the background can shine through.
PhotoShop-users can achieve this with the second opacity slider on a layer that controls the opacity of the fill. ("Fläche: 0%" – no idea how it's called in english.)
Any ideas for Affinity Designer?

(Note: I can't do this like in the demo where I've masked the background and used this layer to cover the yellow circle. Finally I need a solution that can be exported as a SVG for websites and the background will not be under my control.)

Thanks
Tom

[joe_l]

Just set the Fill Opacity to 0%.

[Tomeric]

Thanks joe_l, that's it!

I didn't recognize the select box in the popup.

[v_kyr]

Note however, that the whole via an Affinity FX effect here will of course be rasterized from an Affinity exported SVG file, aka as base64 uuencoded bitmap image data. So your SVG file will contain a raster image and not plain vectors.

In order to prevent this, aka keep things as plain vectors, you would have to define it the SVG code way in some text editor instead. Since Affinity's SVG parser can't parse/show this up, you need to use a webbrowser for previews (for example FF).

No rasterization when SVG coded ...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 200 200" >
  <defs>
    <filter id="blur-out">
      <feDropShadow dx="0" dy="0" stdDeviation="4.5"
          flood-color="black"/>
      <feComposite operator="out" in2="SourceGraphic"/>
    </filter>
  </defs>
  <circle cx="75" cy="75" r="50" filter= "url(#blur-out)"/>
</svg>

• circle_trans_with_shadow.svg

 

And with masking, then making the bits you don't want to mask white and the bits you do black ...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200" viewBox="0 0 200 200" >
  <defs>
    <filter id="blur">
      <feDropShadow dx="0" dy="0" stdDeviation="4.5"
          flood-color="black"/>
    </filter>
    <mask id="circle-mask" x="-0.2" y="-0.2" width="1.4" height="1.4">
      <rect width="100%" height="100%" fill="white"/>
      <circle cx="75" cy="75" r="50" fill="black"/>  
    </mask>
  </defs>
  <circle cx="75" cy="75" r="50" style="mask: url(#circle-mask); filter: url(#blur)"/>
</svg>

 

[Tomeric]

@v_kyr: I knew about the rasterization... the difference here would be ~35 kb, what's exaptable.

However, you motivated me to try a pure SVG-alternative

It was easy – with your example code – but I don't manage to get rid off the one pixel outline/glow in the upper right part of the circle. I think that masking could be the solution, but I still don't get it implemented. Have to look deeper into that...

<circle cx="1860.6" cy="338.234" r="338.686" style="filter:url(#ausschnitt-shadow)"/>
[...]
<defs>
    <filter id="ausschnitt-shadow">
        <feDropShadow dx="-17" dy="17" stdDeviation="10" flood-color="black" flood-opacity="0.4"/>
        <feComposite operator="out" in2="SourceGraphic"/>
    </filter>
</defs>