2012-12-27 23 views
50

Próbuję uzyskać gradient zastosowany do elementu SVG rect.Gradient SVG przy użyciu CSS

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?

Odpowiedz

55

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>

+1

Więc stworzyłem ten gradient w osobny plik i użył 'fill' w ten sposób:' fill: url (../ js/gradient.svg # MyGradient); '. Czy to dobra droga? –

+0

@HrishikeshChoudhari: Tak, to prawda, ale Chrome i ja uważamy, że Safari również nie obsługuje odwoływania się do elementów z innych plików. Nie jestem pewien co do IE9 (nie mogę teraz przetestować, po prostu spróbuj). –

+1

To zadziała w Firefoksie, ale ku mojej rozpaczy nie działa w Webkit (Safari/Chrome). Co za żart! Oto przyszłość ... –

-6

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