मेरा लक्ष्य SVG का बार-बार उपयोग करना है, लेकिन मुझे वेबसाइट के विभिन्न हिस्सों में उपयोग के लिए fill रंग को CSS में बदलने में सक्षम होना चाहिए।

जहां तक ​​SVG के बारे में मेरी समझ है, इसे बाहरी फ़ाइल (background:url(image.svg)) के रूप में लोड नहीं किया जा सकता, क्योंकि तब मैं सक्षम नहीं हूं CSS प्रॉपर्टी को बदलने के लिए जैसे कि भरें इसकी प्रॉपर्टी। दूसरी ओर, SVG को HTML (...) में इनलाइन नहीं किया जा सकता है, तब मैं हूं पृष्ठभूमि संपत्ति में इसका उपयोग/संदर्भित करने में सक्षम नहीं है।

अगर मैं गलत हूं तो कृपया मुझे सुधारें, या क्या आपके पास इसका कोई समाधान है?

2
koubin 17 फरवरी 2021, 11:04

1 उत्तर

ठीक है तो यह बहुत आसान नहीं है, लेकिन इसे कुछ काम के साथ एसवीजी में ही किया जा सकता है। यदि आप सरल उदाहरण को देखते हैं तो आप टैग के अंदर देखेंगे कि आप अनिवार्य रूप से किसी भी एसवीजी तत्वों जैसे सर्कल, रेक्ट, या पथ का एक पैटर्न बना सकते हैं। इस प्रकार पैटर्न बनाएं

<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">

सुनिश्चित करें कि चौड़ाई और ऊंचाई आपके SVG के समान हैं या यह इसे काट देगा

फिर defs के बाहर आप अपने पैटर्न को भरने के साथ एक रेक्ट ऑब्जेक्ट बना सकते हैं fill="url(#dots)" इसे पैटर्न की आईडी का उपयोग करना चाहिए

साधारण उदाहरण

.pattern {
  background-color: #2e4057;
  height: 100vh;
}
<div class="pattern">
  <svg width="100%" height="100%">
        <defs>
            <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
                 
                <circle fill="#bee9e8" cx="50" cy="50" r="25">
                </circle>
                 
            </pattern>
        </defs>
         
        <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
</div>

अधिक उन्नत एसवीजी

.pattern {
  background-color: #2e4057;
  height: 100vh;
}
<div class="pattern">
  <svg width="100%" height="100%">
        <defs>
            <pattern id="duck" x="0" y="0" width="209" height="209" patternUnits="userSpaceOnUse">
                <g>
                    <path fill="red" d="M105.572,101.811c9.889-6.368,27.417-16.464,28.106-42.166c0.536-20.278-9.971-49.506-49.155-50.878
                        C53.041,7.659,39.9,28.251,36.071,46.739l-0.928-0.126c-1.932,0-3.438,1.28-5.34,2.889c-2.084,1.784-4.683,3.979-7.792,4.308
                        c-3.573,0.361-8.111-1.206-11.698-2.449c-4.193-1.431-6.624-2.047-8.265-0.759c-1.503,1.163-2.178,3.262-2.028,6.226
                        c0.331,6.326,4.971,18.917,16.016,25.778c7.67,4.765,16.248,5.482,20.681,5.482c0.006,0,0.006,0,0.006,0
                        c2.37,0,4.945-0.239,7.388-0.726c2.741,4.218,5.228,7.476,6.037,9.752c2.054,5.851-27.848,25.087-27.848,55.01
                        c0,29.916,22.013,48.475,56.727,48.475h55.004c30.593,0,70.814-29.908,75.291-92.48C180.781,132.191,167.028,98.15,105.572,101.811
                        z M18.941,77.945C8.775,71.617,4.992,58.922,5.294,55.525c0.897,0.24,2.194,0.689,3.228,1.042
                        c4.105,1.415,9.416,3.228,14.068,2.707c4.799-0.499,8.253-3.437,10.778-5.574c0.607-0.509,1.393-1.176,1.872-1.491
                        c0.87,0.315,0.962,0.693,1.176,3.14c0.196,2.26,0.473,5.37,2.362,9.006c1.437,2.761,3.581,5.705,5.646,8.542
                        c1.701,2.336,4.278,5.871,4.535,6.404c-0.445,1.184-4.907,3.282-12.229,3.282C30.177,82.591,23.69,80.904,18.941,77.945z
                         M56.86,49.368c0-4.938,4.001-8.943,8.931-8.943c4.941,0,8.942,4.005,8.942,8.943c0,4.931-4.001,8.942-8.942,8.942
                        C60.854,58.311,56.86,54.299,56.86,49.368z M149.159,155.398l-20.63,11.169l13.408,9.293c0,0-49.854,15.813-72.198-6.885
                        c-11.006-11.16-13.06-28.533,4.124-38.84c17.184-10.312,84.609,3.943,84.609,3.943L134.295,147.8L149.159,155.398z"/>
                </g>                         
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#duck)"></rect>
    </svg>

उम्मीद है कि यह मदद करता है

एक अधिक संपूर्ण ट्यूटोरियल यहां

1
ruan viviers 17 फरवरी 2021, 12:49