Влияет на те же классы в разных SVG

Question

Я делаю шаблон, который пользователи могут изменять с их настройками. Я работаю с SVG в теге объекта, все эти SVG - это значки, и мне нужно установить шестнадцатеричный цвет для всех из них. Если я равнина поставить Г в моем HTML

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="35.482px" height="36.276px" viewBox="0 10.893 35.482 36.276" enable-background="new 0 10.893 35.482 36.276" 
xml:space="preserve"> 
<g> 
<path class="general-delete-btn" fill="#083847" d="M33.844,38.126l-7.222-7.221l-..."/> 
</g> 
</svg> 

Я мог бы просто использовать

$(".general-delete-btn").attr("fill", "#000000"); 

Вот и все, я меняю их все, но SVGs получить больше больше в моем проекте, поэтому я хотел бы сделать это только с помощью ссылки svg.

<object class='general-details-btn' data='general-details-btn.svg' type='image/svg+xml' height='20' width='20'> 

Как я мог получить первый результат, но при обращении к SVG внутри тега объекта? Спасибо за любое руководство. Приветствия

Answer 1

Вам необходимо получить документ, который удерживает элемент объекта, а затем найти элементы с этим классом в этом документе и, наконец, вызвать setAttribute для этих элементов. Что-то вроде этого ...

document.querySelectorAll(".general-details-btn").forEach(function(element, index, array) { 
    element.contentDocument.querySelectorAll(".general-delete-btn").forEach(function(element, index, array) { 
    element.setAttribute("fill", "#000000"); 
    }); 
}); 

Answer 2

я не мог сделать его короче, но это сделал с двойной итерации и JS, она работает, по крайней мере. Спасибо за вашу помощь, конечно. Приветствую.

var $objsLen = document.getElementsByTagName("object").length; 

    $i = 0; 
    for($i;$i<$objsLen;$i++){ 

     var $obj = document.getElementsByTagName("object")[$i]; 
     var $svgDoc = $obj.contentDocument; 
     var $patchesLen = $svgDoc.getElementsByTagName("path").length; 
     var $patches = $svgDoc.getElementsByClassName("general-details-btn"); 

     $b = 0; 
     for($b;$b<$patchesLen;$b++){ 
      $patches[$b].setAttribute("fill", "red"); 
     } 

    }