Setting SVG filter width & height from CSS filter declaration

Question

I'm using some SVGs as background images on pseudo-content, like this:

a:after {
    content: url('../images/icon_candidate_grey.png');
    content: url('../images/svg/person.svg');
    width: 100px;
    left: 50%;
    margin-left: -50px;
    background: transparent;
}

I want to apply a drop-shadow filter to the SVG in those browsers that will recognise it. I'm doing this so far:

a:hover:after {     
    filter: url('../images/svg/filters.xml#drop-shadow');
    -webkit-filter: drop-shadow( 0 0 10px #999 );
}

The -webkit-filter: declaration works in Chrome, the filter: url declaration works in Firefox. This is a little flaky (I can animate the filter property in Chrome, but not Firefox) but mostly good.

The problem is that in Chrome the edges of the blur get cut off, because the blur is bigger than the original SVG image. This doesn't happen in Firefox because in the filter: url I can define the width & height of my filter, to give enough space for the blur to show without getting cut off. It looks like this, setting the width & height of the filter to 140% of the size of the original image:

 <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="8" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="0"/>
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
                   values="0 0 0 0   0
                  0 0 0 0   0
                  0 0 0 0   0
                  0 0 0 .4 0"/>
    <feBlend in="SourceGraphic" in2="color-out" mode="normal"/>
</filter>

But I can't find any information about how to set this from the CSS -webkit-filter: declaration- so in Chrome, the filter is the same size as the image, and the blur gets cut off.

How can I define a width & height property for a -webkit-filter?

Answer 1

You can't change the webkit filter region size, unfortunatly. But you can re-use your drop-shadow definition via the SVG trapdoor in webkit filters aka:

-webkit-filter: url(../images/svg/filters.xml#drop-shadow);

You can also animate your filter with SMIL or JavaScript like so:

<feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="0">
   <animate attributeName="stdDeviation" from="0" to="8" dur="8s"/>
</feGaussianBlur>