Question

我正在制作一个模板，用户可以根据自己的喜好进行更改。我在对象标签中使用SVG，所有这些SVG都是图标，我需要为所有这些SVG设置十六进制颜色。如果我明白把svg放在我的html中

foreach($LANG as $key=>$row)
{

  $LANG [$key]=$key;
}

echo "<pre>";
print_r($LANG );

我可以简单地使用

<?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>

就是这样，我改变了所有这些，但SVG在我的项目中变得更大，所以我想只使用svg参考。

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

如何通过在对象标签内访问SVG来获得第一个结果？感谢您的任何指导。问候

Answer 1

您需要获取object元素所包含的文档，然后在该文档中找到该类的元素，最后在这些元素上调用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");
        }

    }

影响不同SVG中的相同类

2 个答案: