SVG-Farbverlauf mit CSS

Question

Ich versuche, einen Gradienten auf ein SVG rect Element zu erhalten.

Derzeit verwende ich das Attribut fill. In meiner CSS-Datei:

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

Und das rect Element hat die richtige Füllfarbe, wenn sie im Browser angezeigt.

Allerdings würde ich gerne wissen, ob ich einen linearen Gradienten auf dieses Element anwenden kann?

Answer 1

Verwenden Sie einfach in der CSS, was auch immer Sie in einem fill Attribut verwenden würden. Dies erfordert natürlich, dass Sie den linearen Farbverlauf irgendwo in Ihrem SVG definiert haben. Hier

ist ein komplettes Beispiel:

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

Hier ist, wie ein linearGradient einstellen auf einem Zielelement:

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