javascript - 为什么使用 JS 更改嵌入式 svg 与外部 css 的属性会失败

Question

我有一个用 Inkscape 创建的 svg 图像。图像有一个外部 css 文件，因此可以更改一些图像颜色和其他 svg 属性。这工作正常。例如，stroke: red将 css 文件更改为黄色，将使图像带有黄框（又名中风）。

我也在尝试用js修改颜色。我为此使用 jQuery。但这没有任何效果。

问题是为什么 css 有效而 js 无效？

function changeColor(fillColor,strokeColor){
               console.log("changeColor",fillColor,strokeColor);

        let id = "#rect983";

        let el = $(id);
        if(fillColor){
          el.attr("fill", fillColor);
        }
        if(strokeColor){el.attr("stroke", strokeColor);}
    }

#rect983 { 
    fill:#50574f; 
    stroke:red;
    /*fill:#000000;*/
    /* stroke:#000000; */
    stroke-opacity:1;
    stroke-width:3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<?xml-stylesheet type="text/css" href="logo.css"?> 

<svg
   width="40px"
   height="40px"
   viewBox="0 0 79.374999 79.374999"
   version="1.1"
   id="svg10099"
   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
   sodipodi:docname="base2.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview10101"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="true"
     inkscape:zoom="2.6934743"
     inkscape:cx="182.29244"
     inkscape:cy="135.69834"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer2"
     inkscape:snap-bbox="true"
     inkscape:snap-intersection-paths="true"
     inkscape:object-paths="true"
     inkscape:snap-smooth-nodes="true"
     inkscape:snap-page="true"
     inkscape:bbox-paths="true"
     inkscape:bbox-nodes="true"
     units="px"
     width="300px">
    <inkscape:grid
       type="xygrid"
       id="grid14659"
       spacingx="2.6458333"
       spacingy="2.6458333" />
  </sodipodi:namedview>
  <defs
     id="defs10096">
    <inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect8790"
       is_visible="true"
       lpeversion="1"
       satellites_param="F,0,1,1,0,39.148651,0,1 @ F,0,0,1,0,39.148651,0,1 @ F,0,1,1,0,39.148651,0,1 @ F,0,1,1,0,39.148651,0,1"
       unit="px"
       method="auto"
       mode="F"
       radius="0"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" />
    <linearGradient
       id="linearGradient14259"
       inkscape:swatch="solid">
      <stop
         style="stop-color:#1f5615;stop-opacity:0.33725491;"
         offset="0"
         id="stop14257" />
    </linearGradient>
    <meshgradient
       inkscape:collect="always"
       id="meshgradient1073"
       gradientUnits="userSpaceOnUse"
       x="161.65112"
       y="20.370331">
      <meshrow
         id="meshrow1075">
        <meshpatch
           id="meshpatch1077">
          <stop
             path="c 59.9628,0  119.926,0  179.889,0"
             style="stop-color:#ffffff;stop-opacity:1"
             id="stop1079" />
          <stop
             path="c 0,66.8409  0,133.682  0,200.523"
             style="stop-color:#50574f;stop-opacity:1"
             id="stop1081" />
          <stop
             path="c -59.9629,0  -119.926,0  -179.889,0"
             style="stop-color:#ffffff;stop-opacity:1"
             id="stop1083" />
          <stop
             path="c 0,-66.8409  0,-133.682  0,-200.523"
             style="stop-color:#50574f;stop-opacity:1"
             id="stop1085" />
        </meshpatch>
      </meshrow>
    </meshgradient>
    <meshgradient
       inkscape:collect="always"
       id="meshgradient3117"
       gradientUnits="userSpaceOnUse"
       x="31.496464"
       y="23.677107">
      <meshrow
         id="meshrow3119">
        <meshpatch
           id="meshpatch3121">
          <stop
             path="c 45.0603,0  90.1206,0  135.181,0"
             style="stop-color:#ffffff;stop-opacity:1"
             id="stop3123" />
          <stop
             path="c 0,65.7387  0,131.477  0,197.216"
             style="stop-color:#50574f;stop-opacity:1"
             id="stop3125" />
          <stop
             path="c -45.0603,0  -90.1206,0  -135.181,0"
             style="stop-color:#ffffff;stop-opacity:1"
             id="stop3127" />
          <stop
             path="c 0,-65.7387  0,-131.477  0,-197.216"
             style="stop-color:#50574f;stop-opacity:1"
             id="stop3129" />
        </meshpatch>
      </meshrow>
    </meshgradient>
  </defs>
  <g
     inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="background">
    <rect
       style="stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:fill markers stroke"
       id="rect983"
       width="76.43"
       height="76.430145"
       x="1.5"
       y="1.5"
       ry="6.4650736" />
  </g>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       aria-label="FA"
       transform="matrix(0.22470239,0,0,0.3430025,-2.2235368,-1.6895186)"
       id="text13011"
       style="font-size:270.891px;line-height:1.25;font-family:'Arial Rounded MT Bold';-inkscape-font-specification:'Arial Rounded MT Bold, Normal';letter-spacing:0px;opacity:1;fill-opacity:1;stroke:#020000">
      <path
         d="M 148.15948,53.967163 H 70.780947 v 49.601627 h 64.680513 q 8.99443,0 13.35937,4.1004 4.49722,3.96813 4.49722,10.71395 0,6.74582 -4.49722,10.71395 -4.49721,3.96813 -13.35937,3.96813 H 70.780947 v 63.88689 q 0,12.16893 -5.555381,18.12112 -5.423111,5.81992 -14.020726,5.81992 -8.729885,0 -14.285267,-5.95219 -5.42311,-5.95219 -5.42311,-17.98885 V 47.750427 q 0,-8.465344 2.513149,-13.756184 2.513148,-5.42311 7.803988,-7.803988 5.423111,-2.513149 13.756183,-2.513149 h 92.589697 q 9.39124,0 13.88845,4.232672 4.62949,4.100401 4.62949,10.846221 0,6.878092 -4.62949,11.110763 -4.49721,4.100401 -13.88845,4.100401 z"
         id="path2635"
         style="fill:url(#meshgradient3117);fill-opacity:1;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none"
         sodipodi:insensitive="true" />
      <path
         d="m 299.60978,195.6294 -9.25897,-24.33787 h -78.83352 l -9.25896,24.86695 q -5.42312,14.54981 -9.25897,19.70838 -3.83586,5.02629 -12.56575,5.02629 -7.40717,0 -13.09483,-5.42311 -5.68765,-5.42311 -5.68765,-12.3012 0,-3.96813 1.32271,-8.2008 1.32271,-4.23267 4.36494,-11.77212 L 216.94041,57.273938 q 2.11633,-5.423111 5.02629,-12.962557 3.04224,-7.671718 6.34901,-12.698015 3.43905,-5.026298 8.86216,-8.068531 5.55538,-3.174504 13.62391,-3.174504 8.2008,0 13.62391,3.174504 5.55538,3.042233 8.86216,7.93626 3.43904,4.894026 5.68765,10.581679 2.38088,5.555382 5.9522,14.946622 l 50.65979,125.128354 q 5.95219,14.28527 5.95219,20.76655 0,6.74582 -5.68765,12.43347 -5.55538,5.55538 -13.49164,5.55538 -4.62949,0 -7.93626,-1.71952 -3.30678,-1.58725 -5.55539,-4.36494 -2.2486,-2.90996 -4.89402,-8.72989 -2.51315,-5.95219 -4.36494,-10.4494 z m -77.77535,-53.8343 h 57.9347 L 250.53724,61.771152 Z"
         id="path2637"
         style="fill:url(#meshgradient1073);fill-opacity:1;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none"
         sodipodi:insensitive="true" />
    </g>
  </g>
</svg>
    <button onclick="changeColor('yellow','black')">change colors</button>

标签： javascriptjquerycsssvg