如何使用JQuery動態更改已加載的svg源樣式

Question

我從ajax請求中檢索到后，在編輯分配給變量的svg源代碼時遇到問題。

//my html
<div class="col col-md-12">
    <div class="my-svg" id="show-logo" >
</div>



//javascript
var obj = {category: 'SPORT'}   
$.ajax({
        url : '{{ route("getsvgs") }}',
        type: 'GET',
        data: obj,
        success : function(response, statut){
            var svg_img = response.logo;
            //the ajax request is going on successful and returning the 
            //above svg code.
          $('#show-logo').append(svg_img );
          localStorage._el = JSON.stringify(response);//store localstorage
        },

    error : function(response, statut, error){
        console.log(response);
    },

    complete : function(responce, statut){
        console.log('completed');
    }
});

從您可以看到的svg被附加到div並顯示出來。 這是svg代碼

/* response.logo = <svg class="image-svg" id="svg-logo" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298.63 86.14">
    <title>left</title>
    <text class="svg-logo-name" transform="translate(63.81 65.42)"></text>
    <text class="svg-logo-slogan" transform="translate(66.36 81.64)">logo slogan goes here</text>
    <path class="frontcolor" d="M70.74,172.32c5.11,4,13.08,4.11,16.84,3.32a0.82,0.82,0,0,1-.15,0c-6.82-1.45-11.1-3.74-14.81-7.09s-6.09-7.69-7.55-14.05C65.06,154.5,62.42,165.76,70.74,172.32Z" transform="translate(-62.3 -148.4)"/>
    <path class="backcolor" d="M93.94,181.92c-14.44,4.56-25.63-7-25.63-7a0.24,0.24,0,0,1,.15,0c5.64,3.63,15.69,4.76,23.33,1.87,9.63-3.64,16.27-12.5,16.58-20.72C108.38,156.12,110,176.85,93.94,181.92Z" transform="translate(-62.3 -148.4)"/>
    <path class="frontcolor" d="M113.53,202.4c-6.95-6.67-17.78-6.8-22.9-5.49a0.71,0.71,0,0,1,.21,0c9.27,2.4,15.1,6.2,20.14,11.75s8.28,12.76,10.27,23.3C121.25,231.94,124.85,213.27,113.53,202.4Z" transform="translate(-62.3 -148.4)"/>
    <path class="backcolor" d="M82,186.47c19.63-7.56,34.84,11.53,34.84,11.53a0.28,0.28,0,0,1-.21,0c-7.67-6-21.34-7.9-31.72-3.1-13.09,6-22.12,20.72-22.54,34.35C62.36,229.24,60.17,194.89,82,186.47Z" transform="translate(-62.3 -148.4)"/>
    <ellipse class="frontcolor" cx="25.18" cy="9.3" rx="9.25" ry="9.3"/>
</svg> */ 

現在，當嘗試像這樣編輯svg時，沒有任何反應。

$(".svg-logo-name text").css("font-size", "48px");
$(".frontcolor text").css("fill", "#eeeeee");
$(".backcolor text").css("fill", "#ccddee");

什么都沒有應用。 我該如何實現？ 請。

Answer 1

選擇器錯誤。 您的所有三個選擇器都在尋找包含text的后代元素的元素。 除了<svg>元素本身之外，您的SVG元素都沒有后代。

從CSS選擇器中刪除text 。 同樣， 非常重要 ，在將SVG標記添加到DOM（您的DIV）之前，您無法運行修改樣式的jQuery，否則它將找不到要修改的元素。 在成功或完成回調中運行jQuery。

 $( '.svg-logo-name' ).css( 'font-size', '48px' ); $( '.frontcolor' ).css( 'fill', '#eee' ); $( '.backcolor' ).css( 'fill', '#cde' ); // Above code would go here: // $.ajax( { // success: function ( response, status ) { // // $( '#show-logo' ).append( response.logo ); // // // Modify SVG. // $( '.svg-logo-name' ).css( 'font-size', '48px' ); // $( '.frontcolor' ).css( 'fill', '#eee' ); // $( '.backcolor' ).css( 'fill', '#cde' ); // // } // } ); // // Or it would go here: // $.ajax( { // complete: function ( xhr, status ) { // // // Modify SVG. // if ( 'success' === status ) { // // $( '.svg-logo-name' ).css( 'font-size', '48px' ); // $( '.frontcolor' ).css( 'fill', '#eee' ); // $( '.backcolor' ).css( 'fill', '#cde' ); // // } // // } // } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg class="image-svg" id="svg-logo" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298.63 86.14"> <title>left</title> <text class="svg-logo-name" transform="translate(63.81 65.42)"></text> <text class="svg-logo-slogan" transform="translate(66.36 81.64)">logo slogan goes here</text> <path class="frontcolor" d="M70.74,172.32c5.11,4,13.08,4.11,16.84,3.32a0.82,0.82,0,0,1-.15,0c-6.82-1.45-11.1-3.74-14.81-7.09s-6.09-7.69-7.55-14.05C65.06,154.5,62.42,165.76,70.74,172.32Z" transform="translate(-62.3 -148.4)"/> <path class="backcolor" d="M93.94,181.92c-14.44,4.56-25.63-7-25.63-7a0.24,0.24,0,0,1,.15,0c5.64,3.63,15.69,4.76,23.33,1.87,9.63-3.64,16.27-12.5,16.58-20.72C108.38,156.12,110,176.85,93.94,181.92Z" transform="translate(-62.3 -148.4)"/> <path class="frontcolor" d="M113.53,202.4c-6.95-6.67-17.78-6.8-22.9-5.49a0.71,0.71,0,0,1,.21,0c9.27,2.4,15.1,6.2,20.14,11.75s8.28,12.76,10.27,23.3C121.25,231.94,124.85,213.27,113.53,202.4Z" transform="translate(-62.3 -148.4)"/> <path class="backcolor" d="M82,186.47c19.63-7.56,34.84,11.53,34.84,11.53a0.28,0.28,0,0,1-.21,0c-7.67-6-21.34-7.9-31.72-3.1-13.09,6-22.12,20.72-22.54,34.35C62.36,229.24,60.17,194.89,82,186.47Z" transform="translate(-62.3 -148.4)"/> <ellipse class="frontcolor" cx="25.18" cy="9.3" rx="9.25" ry="9.3"/> </svg>