Gradiente SVG con CSS

Question

Sto cercando di applicare una sfumatura a un elemento SVG rect.

Attualmente, sto usando l'attributo fill. Nel mio file CSS:

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

E l'elemento rect ha il corretto riempimento di colore se visti nel browser.

Tuttavia, mi piacerebbe sapere se posso applicare un gradiente lineare a questo elemento?

Answer 1

Basta usare nel CSS qualsiasi cosa si utilizzi in un attributo fill. Ovviamente, ciò richiede che tu abbia definito il gradiente lineare da qualche parte nel tuo SVG.

Ecco un esempio 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>

Answer 2

Ecco come impostare un linearGradient su un elemento di destinazione:

$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>';