online - Gradiente SVG usando CSS

text gradient css

Question

Estoy tratando de aplicar un degradado a un elemento rect SVG.

Actualmente, estoy usando el atributo de fill . En mi archivo CSS:

rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: #a71a2e;
}

Y el elemento rect tiene el color de relleno correcto cuando se ve en el navegador.

Sin embargo, me gustaría saber si puedo aplicar un degradado lineal a este elemento.

Answer 1

Aquí es cómo configurar un Gradiente lineal en un elemento objetivo:

$output = ''<style type="text/css">
path{fill:url(/'''.$_SERVER[''REQUEST_URI''].''#MyGradient/')}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="0%" stop-color="#e4e4e3" ></stop>
<stop offset="80%" stop-color="#fff" ></stop>
</linearGradient>
</defs>'';

Answer 2

Simplemente use en el CSS lo que usaría en un atributo de fill . Por supuesto, esto requiere que hayas definido el gradiente lineal en algún lugar de tu SVG.

Aquí hay un ejemplo completo:

rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: url(#MyGradient);
}

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{fill:url(#MyGradient)}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<rect width="100" height="50"/>
</svg>