CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
tony pro
tony pro

Reputation: 435

How to change loaded svg source style dynamically with JQuery

I am having problem editting svg source code that was assigned to a variable after retrieved from an ajax request.

//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');
    }
});

from what you can see the svg is been appended to the div and showing. here is the svg code

/* 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> */

Now when trying to edit the svg like this nothing is happening.

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

Nothing is been applied. how can I achieved that? please.

Upvotes: 0

Views: 494

Answers (1)

hungerstar
hungerstar

Reputation: 21685

The selectors are wrong. All three of your selectors are looking for an element with a descendant element of text. None of your SVG elements have descendants besides the <svg> element itself.

Remove text from your CSS selectors. Also, very important, you cannot run the jQuery that modifies the styles until the SVG markup has been added to the DOM (your DIV), otherwise it won't find those elements to modify. Run the jQuery in the success or complete callbacks.

$( '.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>

Upvotes: 2

Related Questions