Can I make one SVG filter with multiple effects?

Question

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 https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Combining_functions. I simply copy and pasted the brightness code into the greyscale. Here it is

    <svg xmlns="http://www.w3.org/2000/svg">
 <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://www.w3.org/2000/svg">
 <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%. In an ideal world I'd like to copy the effects of brightness:30%; and greyscale:90%; on webkit exactly into this SVG

Answer 1

combine the effects into a single filter.

 <filter id="both">
    <feComponentTransfer result="brightness">
        <feFuncR type="linear" slope=".3"/>
        <feFuncG type="linear" slope=".3"/>
        <feFuncB type="linear" slope=".3"/>
    </feComponentTransfer>
  <feColorMatrix type="matrix" in="brightness" 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"/>
  </filter>