我对 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"<script src="main3.js"></script></body></html>
1 回答
桃花长相依
TA贡献1860条经验 获得超8个赞
三个类selected1,selected2和selected3都设置为相同的内容：
fill: var(--Lawn);
因此，如果您更新该 CSS 变量，所有三个类都会发生变化。 var(--Lawn)是对变量的引用--Lawn。它不是值的副本。
所以使用 CSS 变量是错误的做法。请改用 JS 变量。
另一个问题是您的 SVG 已损坏。您的元素中的属性有问题<path>。您是否手动编辑了该文件？
<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"
无论如何，这是我如何做到这一点的一个例子。
// Holds the currently selected colour
// Initialised to the background colour of the button we have marked as id="defaultColour"
var selectedColour = $("#defaultColour").css("backgroundColor");
// Click handler for buttons
$('.swatches button').on("click", function(event) {
// Set selectedColour to the background colour of the button that the user clicked on
selectedColour = $(event.target).css("backgroundColor");
});
// Click handler for SVG paths
$('#svg2 path').on("click", function(event) {
// Set the path's fill colour to the currently selected colur
$(event.target).css("fill", selectedColour);
});
path {
fill: grey;
cursor: pointer;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;;
}
.swatches button {
display: inline-block;
width: 100px;
height:100px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swatches">
<button style="background: rgb(153,153,0)" id="defaultColour"></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>
<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">
<g transform="matrix(1.3333333,0,0,-1.3333333,0,1122.52)" id="g10">
<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"
d="M 584.447,109.821 H 17.518 V 676.75 h 566.929 z" />
<path class="zone2"
id="path14"
fill="none"
style="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="none"
style="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>
添加回答
举报
0/150
提交
取消