Javascript 如何通过单击svg来更改其填充颜色_Javascript_Svg

Javascript 如何通过单击svg来更改其填充颜色

javascript svg

Javascript 如何通过单击svg来更改其填充颜色,javascript,svg,Javascript,Svg,我对web开发和javascript完全陌生，（但我对编程有基本的了解）我想创建一组具有不同颜色的按钮，让用户能够单击按钮选择颜色，然后在svg图像中填充区域（路径），我的问题是，我创建了一个变量，该变量在单击按钮时获取颜色值，并使用它为svg图像上的路径上色，当我从按钮中选择不同的颜色时，svg图像中的颜色会发生变化，而不单击它。我希望能够保持svg图像上以前的颜色，直到再次单击它进行更改。请有人帮忙，很抱歉这么长的留言。这是HTML <!DOCTYPE html PUBLIC>

我对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>

这是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);
            
        })
    })

三个类

selected1

、

selected2

和

selected3

都设置为相同的内容：

fill: var(--Lawn);

因此，如果您更新CSS变量，所有三个类都将更改

var（--Lawn）

是对

--Lawn

变量的引用。它不是该值的副本

因此，使用CSS变量是错误的方法。改用JS变量

另一个问题是SVG已损坏。

元素中的属性有问题。您是否手动编辑了该文件

 <svg>
 xmlns:dc="http://purl.org/dc/elements/1.1/"

..snip..

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

路径{
填充物：灰色；
光标：指针；
笔画：黑色；
笔画宽度：1px；
笔划线条连接：圆形；；
}
.样本按钮{
显示：内联块；
宽度：100px；
高度：100px；
光标：指针；
}

非常感谢，伙计！，它工作得很好。

 <svg>
 xmlns:dc="http://purl.org/dc/elements/1.1/"

..snip..

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

 <svg
 xmlns:dc="http://purl.org/dc/elements/1.1/"

..snip..

<path class="zone1"
 id="path12"
   fill="none" 
   style="stroke:#1d1d1b;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"