【发布时间】：2020-12-01 18:29:50
【问题描述】：
我对 Web 开发和 javascript 完全陌生，（但我对编程有基本的了解） 我想创建一堆具有不同颜色的按钮，并让用户能够单击一个按钮来选择一种颜色，然后在 svg 图像中填充一个区域（路径），我的问题是我创建了一个单击按钮时获取颜色值的变量，我使用它为 svg 图像上的路径着色，当我从按钮中选择不同的颜色时，svg 图像中的颜色会发生变化，而无需单击它。我希望能够在 svg 图像上保留以前的颜色，直到我再次单击它进行更改。请有人帮助并为长消息感到抱歉。 这是 HTML
<!DOCTYPE html PUBLIC>
<html>
<head>
<link rel="stylesheet" href="pathcolors3.css">
</head>
<body>
<div class="swatches">
<button style="background: rgb(153,153,0)"></button>
<button style="background: rgb(103,103,0)"></button>
<button style="background: rgb(100,100,0)"></button>
<button style="background: rgb(10,20,100)"></button>
<button style="background: rgb(26,75,100)"></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<svg>
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 793.70667 1122.52"
height="1122.52"
width="793.70667"
xml:space="preserve"
id="svg2"
version="1.1"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6" /><g
transform="matrix(1.3333333,0,0,-1.3333333,0,1122.52)"
id="g10"><path class="zone1"
id="path12"
fill="";stroke:#1d1d1b;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-
miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="M 584.447,109.821 H 17.518 V 676.75 h 566.929 z" /><path class="zone2"
id="path14"
fill="";stroke:#1d1d1b;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-
miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="M 242.566,109.741 H 129.18 V 676.67 h 113.386 z" /><path class="zone3"
id="path16"
fill="";stroke:#1d1d1b;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-
miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="M 471.022,109.894 H 357.636 v 566.929 h 113.386 z" /></g></svg>
<script src="main3.js">
</script>
</body>
</html>
这是 CSS
:root{
--Lawn: rgb(100,100,100); /* this is the variable */
}
path {
fill: grey;
cursor: pointer;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;;
}
.selected1{
fill: var(--Lawn);
}
.selected2{
fill: var(--Lawn);
}
.selected3{
fill: var(--Lawn);
}
.swatches button{
display: inline-block;
width: 100px;
height:100px;
cursor: pointer;
}
这是javascript
$('#path12').on("click", function() {
$('#path12.selected1').attr("class", "");
$(this).attr("class", "selected1");
});
$('#path14').on("click", function() {
$('#path14.selected2').attr("class", "");
$(this).attr("class", "selected2");
});
$('#path16').on("click", function() {
$('#path16.selected3').attr("class", "");
$(this).attr("class", "selected3");
});
var root=document.querySelector(':root');
var swatches = document.querySelectorAll('.swatches button');
swatches.forEach((swatch)=>{
swatch.addEventListener('click',(e)=>{
root.style.setProperty('--Lawn',e.target.style.background);
})
})
【问题讨论】：
标签： javascript svg