为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕村225694 2023-08-24 21:01:42
我对 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>


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 128 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信