Can I make one SVG filter with multiple effects?

Vote count:

0

I"m trying to create a filter that both dulls the brightness down to 30% and also greyscales the image to 90%. On webkit this is ridiculously simple, but Gecko currently only supports filters through calling them with filters:url(filter.svg), and when I call two different ones on the same CSS element like this: filter: url(filters.svg#grayscale); filter: url(brightness.svg#brightness);

it seems to cancel out the first filter.

I have this SVG file that I made from a greyscale filter I found somewhere on StackOverflow and a brightness filter from http://ift.tt/1feCtka. I simply copy and pasted the brightness code into the greyscale. Here it is

    <svg xmlns="http://ift.tt/nvqhV5">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</svg>

<svg height="0" xmlns="http://ift.tt/nvqhV5">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope=".3"/>
        <feFuncG type="linear" slope=".3"/>
        <feFuncB type="linear" slope=".3"/>
    </feComponentTransfer>
  </filter>
</svg>

I can see that filters are 'called' using the context. Seeing this I think I should be able to either call them both in the same line or merge the code into one called filter that both greyscales and reduces brightness.. Unfortunately, I have no idea how to do either.

I also am not sure how to alter the greyscale filters code into making it grayscale to 90%... Currently it's on 100%

asked 45 secs ago

fuccboi

38