YaphatS YaphatS - 2 months ago 7
CSS Question

CSS cannot select <g> tag to change fill attribute in SVG object

I have a code like this in my HTML:

<a href="#">
<object type="image/svg+xml" class="nav-logo" width="204" height="34" data="img/wp/logo-white.svg">nav-logo</object>
</a>


I need to change the fill color upon scrolling so I make a class which will select the tag inside the SVG image and change the fill attribute's value but it doesn't seem to work no matter what I tried.

Here's the body of the SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="462px" height="73px" viewBox="0 0 462 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>emissaries-logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="emissaries-logo" fill="#FFFFFF">
<path d="M44.762,42.7358 L15.313,42.7358 C15.206,44.1288 15.1,45.9488 15.1,47.8738 C15.1,59.7608 20.347,64.7938 28.7,64.7938 C34.375,64.7938 40.694,61.4758 43.479,57.8358 C43.799,57.4078 45.727,58.8008 45.727,60.2978 C45.727,60.6208 45.62,60.8348 45.406,61.1528 C41.979,66.1858 35.232,72.2938 24.952,72.2938 C10.817,72.2938 0,61.2628 0,47.6598 C0,33.6338 9.746,22.0658 24.952,22.0658 C38.98,22.0658 46.796,31.8138 46.796,41.2388 C46.796,42.1988 45.941,42.7358 44.762,42.7358 M25.166,26.2438 C19.919,26.2438 16.813,31.4908 15.848,38.7718 L27.628,38.4538 C31.913,38.3438 32.982,37.3798 32.982,34.8128 C32.982,30.0978 30.199,26.2438 25.166,26.2438" id="Fill-1"></path>
<path d="M155.6013,15.4228 C159.7763,15.4228 163.2033,11.8868 163.2033,7.6038 C163.2033,2.6298 158.3443,-1.2802 153.1483,0.3928 C150.6603,1.1938 148.6583,3.3068 148.0863,5.8568 C146.9593,10.8798 150.8663,15.4228 155.6013,15.4228" id="Fill-3"></path>
<path d="M170.1641,66.8327 C164.3821,66.1867 162.8841,64.6887 162.8841,57.8357 L162.8841,41.0197 C162.8841,35.4547 163.4181,27.0987 163.7401,22.7117 C163.7401,22.0657 163.0961,21.5337 161.8111,21.5337 C160.9561,21.5337 160.3141,22.1747 159.8841,22.3887 C155.7091,24.8507 148.3211,27.7457 142.3231,29.0287 C141.8951,29.0287 141.4661,30.0977 141.4661,30.8487 C141.4661,31.5997 141.8951,32.5647 142.3231,32.6687 C147.4631,33.0967 148.9611,34.2757 148.9611,39.9507 L148.9611,57.8357 C148.9611,64.6887 147.3561,66.1867 141.6811,66.8327 C141.6431,66.8417 141.4931,66.8417 141.4481,66.8327 C135.2381,66.1867 134.2731,64.6887 134.2731,57.8357 L134.2731,37.9167 C134.2731,29.4567 128.9181,22.0657 118.1031,22.0657 C111.6771,22.0657 105.7891,25.1737 101.0761,31.3857 C98.8291,25.6017 92.9381,22.0657 85.5491,22.0657 C79.7651,22.0657 74.3041,25.0647 70.1281,31.0627 L70.5551,22.4987 C70.5551,21.8517 69.9151,21.3197 68.6281,21.3197 C67.7731,21.3197 67.1291,21.9607 66.7001,22.1747 C62.8471,24.5327 55.4561,27.3127 50.4231,28.6007 C49.8891,28.6007 49.5671,29.6697 49.5671,30.4207 C49.5671,31.1717 49.8891,32.1317 50.4231,32.2417 C55.4561,32.6687 56.3141,33.8477 56.3141,39.5227 L56.3141,57.8357 C56.3141,64.6887 55.3491,66.1867 49.1391,66.8327 C48.6031,66.9367 48.2811,68.0067 48.2811,68.7577 C48.2811,69.6127 48.6031,70.6867 49.1391,70.6867 C53.6361,70.6867 57.6001,70.1497 62.7401,70.1497 C67.8801,70.1497 71.2001,70.6867 75.6951,70.6867 C76.1251,70.6867 76.5541,69.6127 76.5541,68.7577 C76.5541,68.0067 76.1251,66.9367 75.6951,66.8327 C71.0901,66.3997 70.3421,64.5797 70.3421,57.8357 L70.3421,36.8467 C73.0211,32.3457 75.4831,29.7797 80.0881,29.7797 C86.1901,29.7797 88.4411,33.6347 88.4411,40.4877 L88.4411,57.8357 C88.4411,64.5797 87.5831,66.3997 83.0851,66.8327 C82.6571,66.9367 82.2281,68.0067 82.2281,68.7577 C82.2281,69.6127 82.6571,70.6867 83.0851,70.6867 C87.5831,70.6867 91.0111,70.1497 96.1491,70.1497 C101.1841,70.1497 103.1111,70.6867 107.6101,70.6867 C108.0371,70.6867 108.4641,69.6127 108.4641,68.7577 C108.4641,68.0067 108.0371,66.9367 107.6101,66.8327 C103.0041,66.3997 102.2551,64.5797 102.2551,57.8357 L102.2551,35.7727 C104.9311,31.9177 107.5021,29.7797 112.5351,29.7797 C118.6371,29.7797 120.3521,33.6347 120.3521,40.4877 L120.3521,57.8357 C120.3521,64.5797 119.6031,66.3997 115.1041,66.8327 C114.5701,66.9367 114.2481,68.0067 114.2481,68.7577 C114.2481,69.6127 114.5701,70.6867 115.1041,70.6867 C119.6031,70.6867 122.8161,70.1497 127.9561,70.1497 C133.0961,70.1497 136.9511,70.6867 141.4481,70.6867 L141.6811,70.6867 C146.1771,70.6867 150.4611,70.1497 155.6011,70.1497 C160.7421,70.1497 165.6671,70.6867 170.1641,70.6867 C170.5951,70.6867 171.0221,69.6127 171.0221,68.7577 C171.0221,68.0067 170.5951,66.9367 170.1641,66.8327" id="Fill-5"></path>
<path d="M192.0862,72.2936 C185.1252,72.2936 181.5922,69.8266 176.1312,69.8266 C175.7032,66.0816 174.8452,59.5466 174.3102,56.7666 C174.2032,56.3336 175.3802,55.9056 176.1312,55.9056 C176.9862,55.9056 177.9512,56.2296 178.1652,56.7666 C180.4132,62.9736 186.0902,68.0066 191.6582,68.0066 C196.4782,68.0066 199.0462,65.2266 199.0462,60.6206 C199.0462,50.6586 175.1662,52.5886 175.1662,36.7376 C175.1662,28.2776 184.2702,21.9606 194.0132,21.9606 C199.7972,21.9606 204.2942,23.9956 207.8272,23.9956 C207.9342,27.7456 208.1502,32.8826 208.4712,35.9916 C208.4712,36.5236 207.2932,36.8466 206.5442,36.8466 C205.6862,36.8466 204.7242,36.6326 204.6142,35.9916 C203.4382,30.2076 199.3672,26.2436 194.8712,26.2436 C189.9452,26.2436 187.3732,28.4916 187.3732,32.5646 C187.3732,42.3076 211.6842,41.7706 211.6842,55.9056 C211.6842,65.5446 203.2242,72.2936 192.0862,72.2936" id="Fill-7"></path>
<path d="M232.6671,72.2936 C225.7061,72.2936 222.1731,69.8266 216.7121,69.8266 C216.2841,66.0816 215.4261,59.5466 214.8911,56.7666 C214.7841,56.3336 215.9611,55.9056 216.7121,55.9056 C217.5671,55.9056 218.5321,56.2296 218.7461,56.7666 C220.9941,62.9736 226.6711,68.0066 232.2391,68.0066 C237.0611,68.0066 239.6271,65.2266 239.6271,60.6206 C239.6271,50.6586 215.7471,52.5886 215.7471,36.7376 C215.7471,28.2776 224.8511,21.9606 234.5941,21.9606 C240.3781,21.9606 244.8751,23.9956 248.4111,23.9956 C248.5151,27.7456 248.7341,32.8826 249.0521,35.9916 C249.0521,36.5236 247.8741,36.8466 247.1271,36.8466 C246.2671,36.8466 245.3071,36.6326 245.1981,35.9916 C244.0191,30.2076 239.9511,26.2436 235.4551,26.2436 C230.5261,26.2436 227.9551,28.4916 227.9551,32.5646 C227.9551,42.3076 252.2651,41.7706 252.2651,55.9056 C252.2651,65.5446 243.8051,72.2936 232.6671,72.2936" id="Fill-9"></path>
<path d="M417.3705,42.7358 L387.9215,42.7358 C387.8125,44.1288 387.7035,45.9488 387.7035,47.8738 C387.7035,59.7608 392.9555,64.7938 401.3055,64.7938 C406.9805,64.7938 413.2975,61.4758 416.0825,57.8358 C416.4055,57.4078 418.3305,58.8008 418.3305,60.2978 C418.3305,60.6208 418.2255,60.8348 418.0125,61.1528 C414.5855,66.1858 407.8365,72.2938 397.5555,72.2938 C383.4215,72.2938 372.6085,61.2628 372.6085,47.6598 C372.6085,33.6338 382.3515,22.0658 397.5555,22.0658 C411.5865,22.0658 419.4045,31.8138 419.4045,41.2388 C419.4045,42.1988 418.5495,42.7358 417.3705,42.7358 M397.7695,26.2438 C392.5225,26.2438 389.4195,31.4908 388.4545,38.7718 L400.2365,38.4538 C404.5185,38.3438 405.5885,37.3798 405.5885,34.8128 C405.5885,30.0978 402.8025,26.2438 397.7695,26.2438" id="Fill-11"></path>
<path d="M441.8253,72.2936 C434.8623,72.2936 431.3263,69.8266 425.8653,69.8266 C425.4373,66.0816 424.5823,59.5466 424.0453,56.7666 C423.9403,56.3336 425.1193,55.9056 425.8653,55.9056 C426.7253,55.9056 427.6853,56.2296 427.9043,56.7666 C430.1523,62.9736 435.8273,68.0066 441.3933,68.0066 C446.2123,68.0066 448.7833,65.2266 448.7833,60.6206 C448.7833,50.6586 424.9053,52.5886 424.9053,36.7376 C424.9053,28.2776 434.0073,21.9606 443.7503,21.9606 C449.5343,21.9606 454.0303,23.9956 457.5663,23.9956 C457.6713,27.7456 457.8853,32.8826 458.2083,35.9916 C458.2083,36.5236 457.0293,36.8466 456.2783,36.8466 C455.4233,36.8466 454.4583,36.6326 454.3543,35.9916 C453.1753,30.2076 449.1063,26.2436 444.6063,26.2436 C439.6813,26.2436 437.1103,28.4916 437.1103,32.5646 C437.1103,42.3076 461.4213,41.7706 461.4213,55.9056 C461.4213,65.5446 452.9613,72.2936 441.8253,72.2936" id="Fill-13"></path>
<path d="M373.1439,66.8327 C367.3649,66.1867 365.8629,64.6887 365.8629,57.8357 L365.8629,41.0207 C365.8629,35.4547 366.3999,27.0987 366.7179,22.7117 C366.7179,22.0657 366.0769,21.5337 364.7929,21.5337 C363.9329,21.5337 363.2909,22.1747 362.8639,22.3887 C358.6859,24.8507 351.2999,27.7457 345.3019,29.0287 C344.8739,29.0287 344.4459,30.0977 344.4459,30.8487 C344.4459,31.5997 344.8739,32.5647 345.3019,32.6687 C350.4449,33.0967 351.9419,34.2757 351.9419,39.9507 L351.9419,57.8357 C351.9419,64.6887 350.3349,66.1867 344.6599,66.8327 C344.2329,66.9367 343.8049,68.0067 343.8049,68.7577 C343.8049,69.6127 344.2329,70.6867 344.6599,70.6867 C349.1569,70.6867 353.4389,70.1497 358.5809,70.1497 C363.7189,70.1497 368.6479,70.6867 373.1439,70.6867 C373.5719,70.6867 373.9999,69.6127 373.9999,68.7577 C373.9999,68.0067 373.5719,66.9367 373.1439,66.8327" id="Fill-16"></path>
<path d="M345.7711,11.5043 C346.0031,11.3583 346.7451,10.9793 346.8791,10.9123 C348.2401,10.3613 349.6791,10.3153 350.9921,11.1003 C351.9161,11.6173 352.5411,12.4153 352.7581,12.6773 C352.8021,12.7343 353.2031,13.1973 353.3961,13.3943 L353.4031,13.3873 C354.5231,14.4833 356.2221,15.4013 358.8151,15.4013 C362.9901,15.4013 366.4171,11.8653 366.4171,7.5823 C366.4171,3.7333 363.4991,0.5553 359.7751,0.0743 C359.5201,0.0213 358.6581,0.0153 358.5381,0.0263 C339.7251,0.5453 330.5971,24.4463 328.5691,29.8063 L329.1071,22.4983 C329.1071,21.8513 328.3551,21.3193 327.0721,21.3193 C326.2171,21.3193 325.5751,21.9613 325.1431,22.1753 C321.2881,24.5323 313.8971,27.3123 308.8641,28.6003 C308.4361,28.6003 308.0091,29.6703 308.0091,30.4213 C308.0091,31.1723 308.4361,32.1323 308.8641,32.1323 C314.0071,32.6693 314.8621,33.8483 314.8621,39.5223 L314.8621,57.8353 C314.8621,64.6893 313.8971,66.0813 307.5811,66.8323 C307.1531,66.9373 306.7251,67.9023 306.7251,68.7573 C306.7251,69.6133 307.1531,70.6873 307.5811,70.6873 C312.0771,70.6873 316.7921,70.0403 321.8251,70.0403 C326.9631,70.0403 332.6421,70.6873 337.1391,70.6873 C337.5661,70.6873 337.9941,69.6133 337.9941,68.7573 C337.9941,67.9023 337.5661,66.9373 337.1391,66.8323 C330.9271,66.0813 328.7831,64.6893 328.7831,57.8353 L328.7831,43.6513 C328.7831,37.9853 335.9151,17.6533 345.7711,11.5043" id="Fill-18"></path>
<path d="M303.2971,67.1701 C302.9331,66.4061 302.1351,65.7281 301.7041,65.8191 C301.6181,65.8481 301.5471,65.8651 301.4631,65.8931 C301.4601,65.8941 301.4581,65.8951 301.4581,65.8951 C301.0931,65.9871 300.7111,66.0401 300.3081,66.0401 C299.2891,66.0401 298.4521,65.7101 297.8151,65.0631 C296.8271,64.0511 296.3541,61.7221 296.4051,59.2221 L297.0491,37.9091 C297.2121,32.7221 296.0001,28.7601 293.4531,26.1311 C291.0051,23.6071 287.3301,22.3281 282.5321,22.3281 C271.2271,22.3281 257.8441,29.6151 257.8441,35.7741 C257.8441,39.1411 260.1901,41.4021 263.6841,41.4021 C268.4451,41.4021 270.9511,38.3311 271.3461,32.0111 C271.4581,28.6891 275.0101,26.9451 278.4591,26.9451 C280.1931,26.9451 281.5721,27.4581 282.5591,28.4661 C283.7721,29.7071 284.3541,31.6631 284.2931,34.2821 L283.9621,43.9121 L283.7651,43.9561 C271.7651,46.7281 255.8081,51.5641 255.8081,61.4761 C255.8081,67.6911 260.9391,72.0331 268.2881,72.0331 C274.9081,72.0331 280.1321,69.8091 283.3941,65.5971 L283.7041,65.1981 L283.8501,65.6781 C285.0491,69.5871 288.5191,71.9201 293.1331,71.9201 C296.7671,71.9201 300.5811,71.2251 303.3001,69.2831 C303.3241,69.2661 303.3441,69.2471 303.3671,69.2301 C303.7191,69.0011 303.6511,67.9131 303.2971,67.1701 L303.2971,67.1701 Z M283.8641,47.4571 L283.4381,60.0941 C282.4401,64.2041 278.7151,66.0191 275.4631,66.0191 C271.7441,66.0191 269.5241,63.4001 269.5241,59.0141 C269.5241,51.6011 276.6101,48.8801 283.5401,47.1911 L283.8741,47.1091 L283.8641,47.4571 Z" id="Fill-20"></path>
</g>
</g>
</svg>


I have tried some options such as:

#emissaries-logo {
fill: $dark-gray !important;
}

svg ~ g {
fill: $dark-gray !important;
}


but none of them worked. Any idea?

Answer

You can't actually style <g> elements (though I've read somewhere there are some exceptions), since they're only meant to group children. To my knowledge, I guess you could use<rect>:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="462px" height="73px" viewBox="0 0 462 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
    <title>emissaries-logo</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="emissaries-logo" fill="#FFFFFF">
          <rect fill="#A9A9A9" d="M44.762,42.7358 ...." />
          //and so on
        </g>
    </g>
  </svg>