How to create drop shadow in XML
Posted in
XML | SVG July 05, 2019
In this article I have describe about two examples of drop shadow in XML
Read about SVG here
Create a drop shadows in SVG
The <defs> and <filter> are define the SVG filter in XML.
SVG filters is define<defs>element, <defs> element is short the definition and contains definition of filter elements in SVG drop shadow.
The <filter> element is defines all the SVG filters, <filter> has required id attributes and graphics points is use in SVG filters.
SVG<feoffset>
SVG <feOffset> is create drop shadow and show the shadow of SVG image.
Example1
|
<?xml version="1.0" encoding="utf-8" ?>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="40" dy="40" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="7" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<circle cx="100" cy="50" r="30" stroke="green" stroke-width="3"
fill="red" filter="url(#f1)" /> />
</svg>
</body>
</html>
|
Output
Define the code
- XML define the namespace and version use the program.
- <filter> id is define name of filter, dx and dy of feOffset are axis of the shadow
- <feBlend> is define sourceGraphics of filter.
- <circle> is create a circle shape and fill is show the color of the circle.
- stroke is define the stroke width.
- The <circle> element links the element to the "f1" filter
Example2
|
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<circle cx="200" cy="50" r="30" stroke="green" stroke-width="2"
fill="red" filter="url(#f1)" /> />
</svg>
</body>
</html>
|
Output
Define the code
- XML define the namespace and version use the program.
- <filter> id is define name of filter, dx and dy of feOffset are axis of the shadow
- <feBlend> is define sourceGraphics of filter.
- <circle> is create a circle shape and fill is show the same color of the circle.
- stroke is define the stroke width.
- The <circle> element links the element to the "f1" filter
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here