SVG feMerge and feMergeNode Elements
 Complete SVG Reference
Definition and Usage
The SVG feMerge element is used to create image layers on top of each other.
Each feMerge element can have any number of feMergeNode sub-elements.
Example 1
Copy the following code into Notepad and save
the file as "femerge_1.svg". Place the file in your Web directory:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="test" filterUnits="objectBoundingBox"
x="0" y="0" width="1.5" height="4">
<feOffset result="Off1" dx="15" dy="20"/>
<feFlood style="flood-color:#ff0000;flood-opacity:0.8"/>
<feComposite in2="Off1" operator="in" result="C1"/>
<feOffset in="SourceGraphic" result="Off2" dx="30" dy="40"/>
<feFlood style="flood-color:#ff0000;flood-opacity:0.4"/>
<feComposite in2="Off2" operator="in" result="C2"/>
<feMerge>
<feMergeNode in="C2"/>
<feMergeNode in="C1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text x="30" y="100"
style="font:36px verdana bold;fill:blue;filter:url(#test)">
This is some text!</text>
</svg>
|
View example
Complete SVG Reference
The Altova MissionKit, recent winner of the Jolt Product Excellence and Productivity Award for Best Development Environment,
is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy®, MapForce®, and StyleVision® plus 3 additional tools for less than the price of 2.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
|
