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>