- From: Benjamin Denckla <bdenckla@alum.mit.edu>
- Date: Wed, 5 Nov 2014 21:17:50 -0800
- To: Paul LeBeau <paul.lebeau@gmail.com>
- Cc: Dirk Schulze <dschulze@adobe.com>, "public-fx@w3.org" <public-fx@w3.org>
- Message-ID: <CAG7dtvL3JUEE4hgMN63D2qErGsPCPiRNGA9x8m2S4g+P1jOYPQ@mail.gmail.com>
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