Re: [fxtf-drafts] [filter-effects-2] Add recolor() shorthand (#334)

Hi, I'm not sure if this is still in the works, but if it helps expedite this, the single-argument version can be accomplished without a matrix:
```SVG
<filter id="colorize"><feFlood flood-color="[color]"/><feComposite in2="SourceAlpha" operator="in"/></filter>
```
or, including an `amount` parameter:
```SVG
<filter id="colorize">
  <feFlood flood-color="[color]"/>
  <feComposite in2="SourceAlpha" operator="in"/>
  <feComposite operator="arithmetic" k1="0" k2="[amount]" k3="[1 - amount]" k4="0" in2="SourceGraphic"/>
</filter>
```
I would like this because the SVG-filter version can't respond to changes in color.
Here is a minimal example where the CSS-filter would be useful for using with `currentColor`:
```HTML
<html>
<head>
  <style>
    a[target=_blank]::after {
      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" viewBox="0 0 20 20"><path d="M7 3h-6v16h16v-6M9,11 18,2M13 1h6v6" fill="none" stroke="black" stroke-linecap="square" stroke-width="2"/></svg>');
      filter: colorize(currentColor);
      margin-left: 0.5ch;
    }
    
    /* Closest fallback is to define a separate filter for each anticipated colour: */
    a[target=_blank]::after { filter: url(#colorize-blue); }
    a[target=_blank]:active::after { filter: url(#colorize-red); }
    /* Doesn't work because of privacy restrictions on :visited */
    a[target=_blank]:visited::after { filter: url(#colorize-purple); }
  </style>
</head>
<body>
  <a href="https://example.org" target="_blank">This link opens in a new window</a>
  
  <svg width="0" height="0">
    <filter id="colorize-blue"><feFlood flood-color="blue"/><feComposite in2="SourceAlpha" operator="in"/></filter>
    <filter id="colorize-red"><feFlood flood-color="red"/><feComposite in2="SourceAlpha" operator="in"/></filter>
    <filter id="colorize-purple"><feFlood flood-color="purple"/><feComposite in2="SourceAlpha" operator="in"/></filter>
  </svg>
</body>
</html>
```
This adds the following image to external links, and allows it to respond to changes in text color:
![This link opens in a new window](https://user-images.githubusercontent.com/43872775/136293927-77b123ee-b036-461f-a55a-017be7d3b4ca.png)

-- 
GitHub Notification of comment by michaelmcleodnz
Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/334#issuecomment-937300253 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 6 October 2021 22:53:51 UTC