第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何通過單擊來更改 svg 的填充顏色

如何通過單擊來更改 svg 的填充顏色

慕村225694 2023-08-24 21:01:42
我對 Web 開發(fā)和 javascript 完全陌生，（但我對編程有基本的了解）我想創(chuàng)建一堆具有不同顏色的按鈕，并讓用戶能夠單擊按鈕來選擇顏色和然后去填充 svg 圖像中的區(qū)域（路徑），我的問題是我創(chuàng)建一個(gè)變量，該變量在單擊按鈕時(shí)獲取顏色值，我用它來為 svg 圖像上的路徑著色，每當(dāng)我從按鈕中選擇不同的顏色，svg 圖像中的顏色會(huì)發(fā)生變化，而無需單擊它。我希望能夠保留 svg 圖像上以前的顏色，直到我再次單擊它進(jìn)行更改。請有人幫忙，對這么長的消息表示歉意。這是 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貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊

三個(gè)類selected1,selected2和selected3都設(shè)置為相同的內(nèi)容：


fill: var(--Lawn);

因此，如果您更新該 CSS 變量，所有三個(gè)類都會(huì)發(fā)生變化。 var(--Lawn)是對變量的引用--Lawn。它不是值的副本。


所以使用 CSS 變量是錯(cuò)誤的做法。請改用 JS 變量。


另一個(gè)問題是您的 SVG 已損壞。您的元素中的屬性有問題<path>。您是否手動(dòng)編輯了該文件？


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

應(yīng)該是這樣的：


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

無論如何，這是我如何做到這一點(diǎn)的一個(gè)例子。


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


查看完整回答
反對 回復(fù) 2023-08-24
  • 1 回答
  • 0 關(guān)注
  • 213 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號