0

I am working on a custom Wordpress Theme run on my localhost server. I am having trouble figuring out why the class is being added to the classList, but the style elements are not applying.

enter image description here

Javascript: "custom.js"

$(document).load(function() {
    changeColor();
});

function changeColor(){
    var x = document.getElementById("icon").contentDocument;
    var y = x.querySelectorAll("path, circle");

    for(var i = 0; i < y.length; ++i) {
        y[i].classList.add("icon_stroke");
    }
}

External CSS Stylesheet: "style.css"

.icon_stroke {
    stroke: red;
}

HTML/PHP: "front-page.php"

<object id="icon" data="<?php bloginfo('template_directory');?>/src/imgs/icons/balance_icon_light_circle.svg" type="image/svg+xml"></object>

I can see in the Chrome editor that it successfully adds the class to the classList of the SVG element, however, there is no styling change to the SVG. I assume this might have something to do with the external stylesheet interacting with an external SVG object. I have (a) attached screenshot(s) for further clarification. Please let me know if you understand what is causing this issue, or if you have a workaround solution.

Thanks!!!!

Nick Soltis
  • 23
  • 4
  • Did you link the "styles.css" in your html file? Also, are the classes "starter" and "icon_stroke" in the same css file? – SerShubham Feb 10 '20 at 03:57
  • Yes, the style.css is linked inside the HTML page using the functions.php (wp_enqueue_style). The "starter" class is the default class that I set inside of the SVG file itself. The "icon_stroke" class is located in my "style.css" file and what I would like to add to the HTML > object > SVG on load. – Nick Soltis Feb 10 '20 at 18:05

0 Answers0