La propiedad SVG FEDropShadow.dx devuelve el objeto SVGAnimatedNumber correspondiente al componente dx del elemento FEDisplacementMap.dx.
Sintaxis:
var a = FEDropShadow.dx
Valor devuelto: esta propiedad devuelve el objeto SVGAnimatedNumber correspondiente al componente dx del elemento FEDisplacementMap.dx.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<defs>
<filter id="drop_shadow"
filterUnits="objectBoundingBox"
x="-50%" y="-60%" width="250%"
height="250%">
<feDropShadow in="SourceGraphic"
dx="1" dy="1" stdDeviation="30"
flood-color="darkgreen" id="gfg"/>
</filter>
</defs>
<rect x="40" y="40" width="100" height="100"
style="stroke: #000000;
fill: lightgreen;
filter: url(#drop_shadow);" />
<g fill="#FFFFFF" stroke="black"
font-size="10" font-family="Verdana"/>
<text x="50" y="90">GeeksForGeeks</text>
<script type="text/javascript">
var g = document.getElementById("gfg");
console.log(g.dx)
console.log("dx value is : ",g.dx.baseVal)
</script>
</svg>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<defs>
<filter id="blur"
filterUnits="objectBoundingBox"
x="-10%" y="-10%" width="300%"
height="300%">
<feDropShadow in="StrokePaint"
dx="1" dy="1" stdDeviation="30"
flood-color="darkgreen" id="gfg"/>
</filter>
</defs>
<circle cx="110" cy="60" r="55"
stroke="darkgreen" stroke-width="3"
fill="Lightgreen"
style="stroke: filter: url(#blur);" />
<g fill="#FFFFFF" stroke="Green"
font-size="10" c font-family="Verdana"/>
<text x="60" y="62">GeeksForGeeks</text>
<script type="text/javascript">
var g = document.getElementById("gfg");
console.log(g.dx)
console.log("dx value is : ",g.dx.baseVal)
</script>
</svg>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde
- Firefox
- Safari
- Ópera
Referencia: https://developer.mozilla.org/en-US/docs/Web/API/SVGFEDropShadowElement