Javascript 如何使用JQuery动态更改加载的svg源代码样式

我在编辑从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');
    }
});

---

没有应用任何内容。我怎样才能做到这一点？请。

选择器错了。所有三个选择器都在查找子元素为

text

的元素。除了

元素本身之外，您的SVG元素都没有后代

从CSS选择器中删除

文本

。另外，非常重要，在SVG标记添加到DOM（您的DIV）之前，您不能运行修改样式的jQuery，否则它将找不到要修改的元素。在success或complete回调中运行jQuery

$（'.svg logo name'）.css（'font size'，'48px'）；
$（'.frontcolor'）.css（'fill'，'#eee'）；
$（'.backcolor'）.css（'fill'，'#cde'）；
//上面的代码如下：
//$.ajax（{
//成功：功能（响应、状态）{
//
//$（“#显示徽标”）.append（response.logo）；
//     
////修改SVG。
//$（'.svg logo name'）.css（'font size'，'48px'）；
//$（'.frontcolor'）.css（'fill'，'#eee'）；
//$（'.backcolor'）.css（'fill'，'#cde'）；
//
//  }
// } );
//
//或者在这里：
//$.ajax（{
//完成：功能（xhr，状态）{
//     
////修改SVG。
//如果（'success'==状态）{
//
//$（'.svg logo name'）.css（'font size'，'48px'）；
//$（'.frontcolor'）.css（'fill'，'#eee'）；
//$（'.backcolor'）.css（'fill'，'#cde'）；
//
//     }
//
//  }
// } );

左边
标志标语在这里
选择器错误。所有三个选择器都在查找子元素为
text
的元素。除了
元素本身之外，您的SVG元素都没有后代

从CSS选择器中删除
文本
。另外，非常重要，在SVG标记添加到DOM（您的DIV）之前，您不能运行修改样式的jQuery，否则它将找不到要修改的元素。在success或complete回调中运行jQuery


$（'.svg logo name'）.css（'font size'，'48px'）；
$（'.frontcolor'）.css（'fill'，'#eee'）；
$（'.backcolor'）.css（'fill'，'#cde'）；
//上面的代码如下：
//$.ajax（{
//成功：功能（响应、状态）{
//
//$（“#显示徽标”）.append（response.logo）；
//     
////修改SVG。
//$（'.svg logo name'）.css（'font size'，'48px'）；
//$（'.frontcolor'）.css（'fill'，'#eee'）；
//$（'.backcolor'）.css（'fill'，'#cde'）；
//
//  }
// } );
//
//或者在这里：
//$.ajax（{
//完成：功能（xhr，状态）{
//     
////修改SVG。
//如果（'success'==状态）{
//
//$（'.svg logo name'）.css（'font size'，'48px'）；
//$（'.frontcolor'）.css（'fill'，'#eee'）；
//$（'.backcolor'）.css（'fill'，'#cde'）；
//
//     }
//
//  }
// } );

左边
标志标语在这里
您的选择器错误
.svg徽标名称
是
文本
元素。选择器错误。所有三个选择器都在查找子元素为
text
的元素。除了
元素本身之外，您的SVG元素都没有后代。我如何编辑它才能工作？因为我改成了这个，但还是一样的pb.$（“.svg logo name”）.css（“font size”，“48px”）；$（“.frontcolor”）.css（“填充”、“eeeeee”）；$（“.backcolor”）.css（“fill”和“#ccddee”）；你的选择器错了
.svg徽标名称
是
文本
元素。选择器错误。所有三个选择器都在查找子元素为
text
的元素。除了
元素本身之外，您的SVG元素都没有后代。我如何编辑它才能工作？因为我改成了这个，但还是一样的pb.$（“.svg logo name”）.css（“font size”，“48px”）；$（“.frontcolor”）.css（“填充”、“eeeeee”）；$（“.backcolor”）.css（“fill”和“#ccddee”）；仍然不工作，我从变量加载svg这一事实会成为问题吗？可能是，您什么时候运行修改样式的jQuery？在使用jQuery访问SVG的DOM元素之前，需要将SVG插入页面中。在success或complete回调中运行jQuery。如果您使用complete，您需要首先检查请求是否成功完成。我会在ajax请求之后直接运行它$（'.svg徽标名称'）.css（）
？如果是这样，那就行不通了。您需要将修改元素的jQuery放入ajax method.hmmm的success或complete回调中，我该怎么做？仍然不工作，我从变量加载svg的事实可能是问题吗？可能是，您什么时候运行修改样式的jQuery？在使用jQuery访问SVG的DOM元素之前，需要将SVG插入页面中。在success或complete回调中运行jQuery。如果您使用complete，您需要首先检查请求是否成功完成。我会在ajax请求之后直接运行它$（'.svg徽标名称'）.css（）

？如果是这样，那就行不通了。您需要将修改元素的jQuery放入ajax method.hmmm的success或complete回调中，我该怎么做？

/* 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-logo-name text").css("font-size", "48px");
$(".frontcolor text").css("fill", "#eeeeee");
$(".backcolor text").css("fill", "#ccddee");