javascript - 如何使用 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 元素都没有后代元素本身。

删除 text从你的 CSS 选择器。此外，非常重要，在将 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>