如何通過單擊更改 svg 的填充顏色
[英]How to change the fill color of an svg by clicking on it
問題描述
我對 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);
})
})
1 個解決方案
解決方案1
0 已采納 2020-12-01 10:29:50
三個類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>
如何使用jQuery動態更改SVG圓填充顏色的顏色
[英]How to change the color of an SVG circle fill color using jQuery dynamically
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.