Gradient SVG przy użyciu CSS

Question

Próbuję uzyskać gradient zastosowany do elementu SVG rect.

Obecnie używam atrybutu fill. W moim pliku CSS:

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

i element rect ma prawidłowy kolor wypełnienia, gdy oglądany w przeglądarce.

Chciałbym jednak wiedzieć, czy mogę zastosować gradient liniowy do tego elementu?

Answer 1

Po prostu użyj w CSS, co chcesz użyć w atrybucie fill. Oczywiście wymaga to zdefiniowania liniowego gradientu gdzieś w SVG.

Powyżej znajduje się pełna przykład:

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

Oto jak ustawić lineargradient na elemencie docelowym:

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