0
我被這個小小的項目卡住了。基本上，我想創建一個網頁，允許用戶從調色板中選擇一種顏色，並根據用戶選擇的顏色更改相應的SVG元素。要求用戶從調色板中選擇顏色並通過JavaScript修改SVG
我用JS顏色調色板，但它也有缺點（它使顯示的顏色的十六進制值，有沒有辦法隱藏它。我不希望我的用戶看到這樣#FFFSAS在他們選擇顏色的按鈕或文本框中的值
他們從調色板中選擇顏色後，相應的svg元素應該顯示該顏色我到了這一步，但由於步驟1的缺點我想我必須重新開始一項新技術。
理想情況下，我有一個手錶骨架，其樂隊的顏色和框架顏色可以由用戶更改。下面是我使用JS顏色包所做的代碼。任何形式的幫助表示讚賞
<html>
<head>
<body>
<script src="jscolor.js"></script>
<p>'onchange' fires after the mouse button is released
<p>Frame color:
<input class="jscolor {valueElement:null,value:66ccff}" onchange="update(this.jscolor)">
<p> Band color:
<input class="jscolor {valueElement:null}" onchange="update1(this.jscolor)" >
<!--<br><button id="bgcolor-button" class="jscolor" onchange="update(this.jscolor)" style="background-image: none; background-color: rgb(91, 171, 163); color: rgb(0, 0, 0);">Choose background</button>-->
<!--<button class="jscolor {valueElement: 'color_value'}" onchange="update(this.jscolor)">Pick a color</button>-->
<svg id="svg3436" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="97mm" width="50mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 744.09448819 1052.3622047">
<metadata id="metadata3441">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1">
<path id="rect2985" style="fill:#800000" d="m451.87 620.2c13.102 0 23.641-9.5583 23.641-21.441v-246.33c0-11.883-10.539-21.441-23.641-21.441h-198.84c-13.102 0-23.641 9.5583-23.641 21.441v246.33c0 11.883 10.539 21.441 23.641 21.441h198.84zm-12.243-19.304h-172.71c-11.381 0-20.542-8.3084-20.542-18.63v-213.95c0-10.322 9.1608-18.63 20.542-18.63h172.71c11.381 0 20.542 8.3084 20.542 18.63v213.95c0 10.322-9.1608 18.63-20.542 18.63z"/>
<path id="rect3758" style="fill:#000000" d="m424.31 822.02h-143.93l-20.297-197.66h188.21z"/>
<path id="path3761" style="fill:#000000" d="m424.31 127.09h-143.93l-20.297 197.66h188.21z"/>
<rect id="rect3763" style="fill:#000000" transform="scale(-1)" ry="9.3628" height="30.299" width="17.83" y="-543.22" x="-237.31"/>
<rect id="rect3765" style="fill:#000000" transform="scale(-1)" ry="9.3628" height="30.299" width="17.83" y="-435.02" x="-237.31"/>
<g id="layer1-7" transform="matrix(0 1 -1 0 1646.9 -154.84)">
<g id="g4387" transform="matrix(0 1.2805 -1.1172 0 1339.7 702.88)">
<rect id="rect3769" style="fill:#000000" ry="1.6079" height="73.966" width="4.8882" y="621.88" x="458.59"/>
<rect id="rect3771" style="fill:#000000" transform="matrix(-.69129 -.72257 .72257 -.69129 0 0)" ry="1.7366" height="79.883" width="4.8882" y="-120.82" x="-779.57"/>
<circle id="path3773" style="fill:#000000" transform="translate(413.71 283.16)" cy="351.83" cx="47.071" r="6.2762"/>
</g>
</g>
</g>
</svg>
<script>
function update(jscolor) {
// 'jscolor' instance can be used as a string
var svgDoc = document.getElementById('svg3436');
var paths = svgDoc.getElementsByTagName("path");
var path = paths[0];
alert(jscolor);
path.style.fill= jscolor;
}
function update1(jscolor) {
// 'jscolor' instance can be used as a string
var svgDoc = document.getElementById('svg3436');
var paths = svgDoc.getElementsByTagName("path");
var path = paths[1];
var path1 = paths[2];
alert(jscolor);
path.style.fill= jscolor;
path1.style.fill= jscolor;
}
</script>
Change type of frame:
<button id="btnt1" onclick="loadimg()"> Frame 1</button>
<img id="image1" src="9.png" height="97mm" width="50mm" style="visibility:hidden">
<script>
function loadimg(){
var svgDoc = document.getElementById("svg3436");
svgDoc.style.display = "none";
document.getElementById("image1").style.display = visible;
}
</script>
</body>
</head>
</html>