如何通过单击来更改 svg 的填充颜色
我对 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>
慕村2256941回答
-
桃花长相依
三个类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>
随时随地看视频慕课网APP
相关分类
JavaScript