【问题标题】：How to make all elements in groups of svg change color onclick (js)如何使svg组中的所有元素在点击时改变颜色（js）
【发布时间】：2019-05-15 12:49:05
【问题描述】：
我想从 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>
我希望组中的所有元素在单击组中的任何元素时都会更改为另一种颜色，并且它们会保持这种颜色。
【问题讨论】：
标签：
javascript
function
svg
colors
setattribute
【解决方案1】：
这行得通
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>
【解决方案2】：
虽然您所做的是正确的，但您正在尝试对组而不是其中的元素应用填充 - 只需循环通过单击的 svg 中的元素将允许您填充它们所有相同的颜色。我使用for 循环来支持浏览器。
另外值得注意的是，点击后它不会显示，直到您将鼠标从元素上移开后才会显示，因为尽管您设置了填充，但您的 css 中仍然设置了 hover 属性。
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>
【解决方案3】：
使用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>
【解决方案4】：
就我个人而言，我可能只是切换一个 CSS 类来打孩子；
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>