सीवीजी ग्रेडियेंट सीएसएस

Question

का उपयोग कर मैं एक एसवीजी rect तत्व पर एक ढाल लागू करने की कोशिश कर रहा हूं।

वर्तमान में, मैं fill विशेषता का उपयोग कर रहा हूं। मेरी सीएसएस फ़ाइल में:

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

और rect तत्व सही भरण रंग जब ब्राउज़र में देखा है।

हालांकि, मैं जानना चाहता हूं कि क्या मैं इस तत्व के लिए रैखिक ढाल लागू कर सकता हूं?

Answer 1

बस सीएसएस में उपयोग करें जो आप fill विशेषता में उपयोग करेंगे। बेशक, यह आवश्यक है कि आपने अपने एसवीजी में कहीं रैखिक ढाल को परिभाषित किया हो।

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

यहाँ एक लक्ष्य तत्व पर एक linearGradient सेट करने का तरीका है:

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