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>