कोण

Question

के संदर्भ में svg रैखिक ढाल निर्दिष्ट करने के लिए कैसे मैं एक एसवीजी रैखिक ढाल निर्दिष्ट करना चाहता हूं जो वास्तव में सीएसएस रैखिक-ढाल व्यवहार को डुप्लिकेट करता है। एक सीएसएस ढाल में, उदाहरण के लिए, आप निर्दिष्ट कर सकते हैं कि क्रमशः एक बॉक्स के ऊपरी बाएं और निचले दाएं भाग पर ढाल प्रारंभ और अंत हो। जब कोई बॉक्स आकार बदलता है, तो पृष्ठभूमि ढाल स्वचालित रूप से नए आकार में अपनाना पड़ता है।

मेरे पहले प्रयास में, मैंने एक कोण निर्दिष्ट करके और बॉक्स आकार से x1, y1, x2, y2 निर्देशांक की गणना करके एसवीजी के साथ एक सीएसएस रैखिक-ढाल को डुप्लिकेट किया। लेकिन यदि बॉक्स का आकार बदलता है, तो ढाल का कोण बदलता नहीं है और अब सही नहीं है। (मुझे सभी निर्देशांकों को दोबारा जोड़ना होगा)।

मेरा अगला प्रयास ढाल को घुमाने के लिए एक ट्रांसफॉर्म का उपयोग करना था। , इस आकार (300,100) के एक बॉक्स के लिए काम करता है लेकिन आपको लगता है कि मैं (150,50) रोटेशन के केंद्र के लिए शुद्ध मान निर्दिष्ट करने के लिए आ रही हैं देखेंगे

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <linearGradient id="g1" gradientUnits="userSpaceOnUse" 
     gradientTransform="rotate(-45 150 50)"> 
    <stop stop-color="#FF0000" offset="0"/> 
    <stop stop-color="#00FF00" offset="0.5"/> 
    <stop stop-color="#0000FF" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" /> 
</svg> 

अब यहाँ कुछ कोड है।

क्या मैं प्रतिशत के मामले में केंद्र निर्दिष्ट कर सकता हूं? अंत में मैं ढाल के कोण को बॉक्स के आयामों को अनुकूलित करना चाहता हूं।

Answer 1

एसवीजी केवल ग्रेडियंट ट्रांसफॉर्म रोटेशन उत्पत्ति specified in terms of absolute coordinates होने की अनुमति देता है। मुझे लगता है कि आप जो करना चाहते हैं उसे करने के लिए आपको जावास्क्रिप्ट के साथ गतिशील रूप से रोटेशन उत्पत्ति सेट करने की आवश्यकता होगी: जो ढाल को घुमाने के लिए है, लेकिन रंगीन स्टॉप को भी युक्त बॉक्स में समान रूप से वितरित किया जाना चाहिए।