異なるSVGで同じクラスに影響する

Question

私は、ユーザーが自分の好みで変更できるテンプレートを作っています。私はオブジェクトタグ内のSVGを使って作業しています。これらのSVGはすべてアイコンなので、すべてのSVGを16進数の色に設定する必要があります。私は平野私のhtmlでSVGを置く場合

<?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"); 

とのthatsそれは、私はそれらすべてを変更することもできますが、私は希望SVGsは私のプロジェクトで大きな大きな取得しますsvgの参照だけでそれを行う。

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

どのように私は、最初の結果を得るが、objectタグ内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"); 
     } 

    }