如何使 svg 组中的所有元素在单击时更改颜色（js）

Question

我想更改来自 svg 文件的组中所有元素的填充 (onclick)。目前，我使用 javascript 将属性设置为 id。这似乎只改变了其中一个元素。

我试过使用 onclick 内联 svg。它似乎没有用。所以我从 javascript 开始。现在，它只填充一个三角形，而我将函数设置为从组中调用。

function callred(){
  document.getElementById('btn1').setAttribute('fill', '#ff00ff');
}

#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
 <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131  "/>
 <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656  "/>
 <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656  "/>
 <polygon points="366.699,581 410,656 453.301,581  "/>
</g>


</svg>

我希望当单击组中的任何元素时，组中的所有元素都会更改为另一种颜色，并且它们会保持这种颜色。

Answer 1

使用document.getElementsByTagName('polygon')获取所有的多边形然后遍历它们，设置每个多边形的填充：

function callred(){
var els = document.getElementsByTagName('polygon')
  for (var i=0; i < els.length; i++) {
      els[i].setAttribute('fill', '#ff00ff');
  }
}

#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
 <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131  "/>
 <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656  "/>
 <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656  "/>
 <polygon points="366.699,581 410,656 453.301,581  "/>
</g>


</svg>

Answer 2

虽然您所做的是正确的，但您正在尝试对组而不是组中的元素应用填充 - 只需循环遍历单击的 svg 中的元素，您就可以为它们填充相同的颜色。我使用 for 循环来支持浏览器。

同样值得注意的是，点击后直到您将鼠标移出该元素后它才会显示，因为尽管您设置了填充，但仍然有一个 hover 属性设置在你的 css.

function callred(){
    const children = document.getElementById('btn1').children;
  for(let i = 0; i < children.length; i++ ){
    children[i].setAttribute('fill','#ff00ff');
  }
}

g:hover > polygon{
    fill: yellow;
}
b:hover > polygon{
    fill: yellow;
}

#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}

<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
 <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131  "/>
 <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656  "/>
 <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656  "/>
 <polygon points="366.699,581 410,656 453.301,581  "/>
</g>


</svg>

Answer 3

就我个人而言，我可能只是切换 css class 来点击 children;

function callred(){
   document.getElementById("btn1").classList.toggle("new-style");
}

#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}

.new-style polygon {
  fill: red!important;
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
 <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131  "/>
 <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656  "/>
 <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656  "/>
 <polygon points="366.699,581 410,656 453.301,581  "/>
</g>


</svg>

Answer 4

这个有效

function callred() {

 [...document.getElementById('btn1').querySelectorAll('*')].forEach((e) => {
    e.setAttribute('fill', '#ff00ff');
  });
}

#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
 <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131  "/>
 <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656  "/>
 <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656  "/>
 <polygon points="366.699,581 410,656 453.301,581  "/>
</g>


</svg>

不确定这是一个好的答案

您也可以使用CSS

function callred() {
 document.getElementById('btn1').classList.toggle("forcecolor");
}

.forcecolor * {
  fill: blue;
}

#svg-object{
    
        height: 100vh;    
        width: 100%;
        background-size: cover;
        background-position: center center;
        border: 15px antiquewhite;
        position: absolute;
    
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="800px" height="754px" viewBox="0 0 800 754" enable-background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="callred()">
 <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131  "/>
 <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656  "/>
 <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656  "/>
 <polygon points="366.699,581 410,656 453.301,581  "/>
</g>


</svg>

如何使 svg 组中的所有元素在单击时更改颜色（js）

How to make all elements in groups of svg change color onclick (js)

javascript

function

svg

colors

setattribute