मैं एक Wordpress कस्टम विषय के एक शीर्ष लेख में एक एसवीजी छवि (लोगो) के सीएसएस को संशोधित करने की कोशिश कर रहा हूँ।

यहाँ हैडर.php में कोड है:

 <!-- logo -->
    <a class="logo" href="<?php echo home_url(); /* insert home link */ ?>">
      <img src="<?php echo get_stylesheet_directory_uri(); /* add theme path */ ?>/img/logo.svg" alt="<?php bloginfo('title'); /* insert blog title */ ?> ">
    </a>

एसवीजी के सीएसएस को संशोधित करने के लिए मुझे इसे इनलाइन करना होगा, लेकिन मुझे नहीं पता कि कैसे करना है, यह एसवीजी इलस्ट्रेटर से सहेजा गया है।

मैंने इस jQuery स्क्रिप्ट को जोड़ने की कोशिश की जो एक एसवीजी छवि को एक इनलाइन एसवीजी में बदल देती है, लेकिन मुझे ब्राउज़र में छवि दिखाई नहीं देती है, अगर मैं तत्व का निरीक्षण करता हूं तो मैं इसे देखता हूं।

/**
 * Replace all SVG images with inline SVG
 */
    jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');

    });

समर्थन के लिए धन्यवाद। कार्लो

0
CarlVarsh 21 मई 2020, 13:12

2 जवाब

मुझे नहीं पता कि आपको किसने बताया, आपको इसे इनलाइन करना होगा। आप केवल आयाम निर्धारित कर सकते हैं।

.logo img { width: 100px; height: auto; }

एक jQuery फ़ंक्शन या कुछ और की आवश्यकता नहीं है। यह स्रोत के रूप में एक svg के साथ सिर्फ एक सामान्य छवि टैग है। आपने svg कोड या कुछ और के माध्यम से एम्बेड नहीं किया है, आपके पास एक सहेजी गई छवि है।

यदि आप .svg छवि फ़ाइल का उपयोग नहीं कर रहे हैं, बल्कि छवि प्रदर्शित करने के लिए एक कोड का उपयोग कर रहे हैं, तो यह कुछ और होगा।

लेकिन आपका कोड दिखाता है कि आपके पास बस एक .svg छवि फ़ाइल है, इसे ठीक से काम करना चाहिए, आप आयाम निर्धारित करते हैं।

0
rank 21 मई 2020, 14:59

.मेन-हेडर {पृष्ठभूमि: url(logo.svg) नो-रिपीट टॉप लेफ्ट; पृष्ठभूमि-आकार: शामिल; } .no-svg .main-header { background-image: url(logo.png); } कुछ इस तरह.. CSS की मदद से।

-1
Gyan Kumar 21 मई 2020, 13:59