W3C home > Mailing lists > Public > public-fx@w3.org > October to December 2014

Re: [filter-effects] proposal: currentColor in feColorMatrix

From: Benjamin Denckla <bdenckla@alum.mit.edu>
Date: Wed, 5 Nov 2014 21:17:50 -0800
Message-ID: <CAG7dtvL3JUEE4hgMN63D2qErGsPCPiRNGA9x8m2S4g+P1jOYPQ@mail.gmail.com>
To: Paul LeBeau <paul.lebeau@gmail.com>
Cc: Dirk Schulze <dschulze@adobe.com>, "public-fx@w3.org" <public-fx@w3.org>
Neat! Only works for a black background, though.

On Wed, Nov 5, 2014 at 2:48 AM, Paul LeBeau <paul.lebeau@gmail.com> wrote:

> Benjamin
>
> Perhaps I am missing something, but the effect you are after seems
> achieveable with SVG filters.  <feFlood> can take currentColor.  For
> example:
>
>     <svg width="0" height="0">
>         <defs>
>             <filter id="filter-inkscale" x="0" y="0" width="100%"
> height="100%">
>                 <!-- invert the image -->
>                 <feColorMatrix in="SourceGraphic" type="matrix" values="-1
>  0  0 0 1
>                                                                          0
> -1  0 0 1
>                                                                          0
>  0 -1 0 1
>                                                                          0
>  0  0 1 0" result="inverted"/>
>                 <feFlood flood-color="currentColor"/>
>                 <feBlend mode="multiply" in2="inverted"/>
>             </filter>
>         </defs>
>     </svg>
>
> Which AFAICS gives the desired effect described in the article you linked
> to.
>
> Demo here: http://jsfiddle.net/py9q6z98/
>
> If you change the value of color in the CSS for the div, the image color
> changes to match the text color.
>
> Paul
>
>
>
> On 5 November 2014 19:19, Dirk Schulze <dschulze@adobe.com> wrote:
>
>> Hi Ben,
>>
>> On Nov 4, 2014, at 7:17 PM, Benjamin Denckla <bdenckla@alum.mit.edu>
>> wrote:
>>
>> > Thanks Dirk, for your response.
>> >
>> > Indeed "bitonal" was a poor word choice. I'm now using "inkscale"
>> instead. See
>> http://dencklatronic.blogspot.com/2014/10/more-on-bitonal-inkscale-images.html
>> .
>> >
>> > Indeed inkscale could be described as a gradient map with two color
>> stops.
>> >
>> > Perhaps Greenblatt could provide an example use of gradientmap.js using
>> the CSS currentColor variable?
>> >
>> > If that is possible, that could be used to implement transparent
>> inkscale.
>> >
>> > Opaque inkscale would require the background equivalent of
>> currentColor, which, oddly, does not seem to exist.
>> >
>> > Even if all that could be done, I do not feel inkscale should require
>> Javascript, in the long run.
>> >
>> > For one thing, this would prevent it from being used in the most
>> popular ebook format: Kindle. Javascript is not allowed in Kindle books,
>> nor would I expect Amazon to allow it anytime soon.
>> >
>> > For another, admittedly more vague thing, it feels like Javascript
>> should be used only as an "escape hatch" if you're doing something weird or
>> interactive. Inkscale is certainly not interactive. As to whether it is
>> weird, that is of course subjective. But I wonder if there is an analogy
>> with transparency. What if web standards were missing transparency, and
>> someone proposed a way to implement it in Javascript? That would be a great
>> workaround until the new standard was propagated to a reasonable percentage
>> of the installed base. But ultimately we would want to see transparency
>> available without Javascript.
>>
>> I first wanted to know if I understand you correctly. A JS prototype can
>> help to demonstrate issues. We will discuss adding this feature to the next
>> level of Filter Effects.
>>
>> Allowing currentColor for this kind of feature will have security
>> requirements. feColorMatrix would get one of the tainted filter primitives
>> and the filter can not be used cross origin. We have this problem with
>> feFlood, feDropShadow and other primitives[1] already. I do not see this as
>> a problem with that though.
>>
>> In your blog post you mentioned access to foreground and background
>> color. currentColor only can represent one color. How would you access the
>> other color? Also, currentColor represents the value of the ‘color’
>> property on an ancestor. ‘color’ is used to style text in HTML and could
>> have unwanted affects to text there. A solution could be CSS Custom
>> properties[2] of course or the latest approach of "brand color” on WHATWG
>> mailing list.
>>
>> Greetings,
>> Dirk
>>
>> [1] http://dev.w3.org/fxtf/filters/#security
>> [2] http://dev.w3.org/csswg/css-variables/
>>
>>
>>
>> >
>> > Ben
>>
>>
>>
>
Received on Thursday, 6 November 2014 05:18:18 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:49:52 UTC