Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's an <a href="http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow.svg" rel="noreferrer">example</a> of applying dropshadow to some svg using the 'filter' property. If you want to control the opacity of the dropshadow have a look at <a href="http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow-lighter.svg" rel="noreferrer">this example</a>. The <code>slope</code> attribute controls how much opacity to give to the dropshadow.</p> <p>Relevant bits from the example:</p> <pre><code>&lt;filter id="dropshadow" height="130%"&gt; &lt;feGaussianBlur in="SourceAlpha" stdDeviation="3"/&gt; &lt;!-- stdDeviation is how much to blur --&gt; &lt;feOffset dx="2" dy="2" result="offsetblur"/&gt; &lt;!-- how much to offset --&gt; &lt;feComponentTransfer&gt; &lt;feFuncA type="linear" slope="0.5"/&gt; &lt;!-- slope is the opacity of the shadow --&gt; &lt;/feComponentTransfer&gt; &lt;feMerge&gt; &lt;feMergeNode/&gt; &lt;!-- this contains the offset blurred image --&gt; &lt;feMergeNode in="SourceGraphic"/&gt; &lt;!-- this contains the element that the filter is applied to --&gt; &lt;/feMerge&gt; &lt;/filter&gt; &lt;circle r="10" style="filter:url(#dropshadow)"/&gt; </code></pre> <p>Box-shadow is defined to work on CSS boxes (read: rectangles), while svg is a bit more expressive than just rectangles. Read the <a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#filters" rel="noreferrer">SVG Primer</a> to learn a bit more about what you can do with SVG filters.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload