- From: Karl Dubost via GitHub <noreply@w3.org>
- Date: Thu, 14 Aug 2025 02:13:11 +0000
- To: public-svg-issues@w3.org
Safari, Firefox, Chrome.
<img width="2476" height="376" alt="Image" src="https://github.com/user-attachments/assets/62dea3f2-c8cf-4c31-9a18-f0379581f503" />
The current example it refers to
```
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feBlend - Examples of feBlend modes</title>
<desc>Five text strings blended into a gradient,
with one text string for each of the five feBlend modes.</desc>
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="300" y2="0">
<stop offset="0" stop-color="#000000" />
<stop offset=".33" stop-color="#ffffff" />
<stop offset=".67" stop-color="#ff0000" />
<stop offset="1" stop-color="#808080" />
</linearGradient>
<filter id="Normal">
<feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Multiply">
<feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Screen">
<feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Darken">
<feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Lighten">
<feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="498" height="498"/>
<g enable-background="new" >
<rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
<g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
<text x="50" y="90" filter="url(#Normal)" >Normal</text>
<text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
<text x="50" y="270" filter="url(#Screen)" >Screen</text>
<text x="50" y="360" filter="url(#Darken)" >Darken</text>
<text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
</g>
</g>
</svg>
```
Example in MDN.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feBlend#example
The filter effects are now defined in their own spec as mentioned in SVG2 https://svgwg.org/svg2-draft/changes.html#filters
https://drafts.fxtf.org/filter-effects/#feBlendElement
with the same example.
The only mention of filters is now
https://svgwg.org/svg2-draft/single-page.html#render-FilteringPaintRegions
And the issue tracker is https://github.com/w3c/fxtf-drafts/labels/filter-effects-1
Maybe it is a better question to ask there?
--
GitHub Notification of comment by karlcow
Please view or discuss this issue at https://github.com/w3c/svgwg/issues/992#issuecomment-3186505634 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 14 August 2025 02:13:12 UTC