javascript - 要求用户从调色板中选择一种颜色并通过 JavaScript 修改 SVG

标签 javascript html css svg

我被我的这个小元素困住了。本质上，我想创建一个网页，允许用户从调色板中选择一种颜色，并根据用户选择的颜色更改相应的 SVG 元素。

  1. 我使用 JS Color 作为调色板，但它有缺点(它一直显示颜色的十六进制值并且无法隐藏它。我不希望我的用户看到像#FFFSAS 值在他们选择颜色的按钮或文本框上。

  2. 从调色板中选择颜色后，相应的 svg 元素应显示该颜色。我走到了这一步，但由于第一步的缺点，我想我必须用一种新技术重新开始。

理想情况下，我有一个 watch 骨架，用户可以更改其表带颜色和框架颜色。下面是我使用 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>

最佳答案

由于 watch /表带的制造商并没有提供所有颜色，我建议仅通过带有选项的下拉选择来添加可用颜色。 下面是一个例子:

<html>
<head>
<body>

<p>Frame color:
<p><div style=padding:5px;width:80px; id=frameColorDiv><select id="frameColorSelect" onChange=frameColorSelected()>
<option value="#000000">Black</option>
<option value="#CD7F32">Bronze</option>
<option value="#D4AF37">Gold</option>
<option value="#C0C0C0">Silver</option>
</select></div></p>
<p> Band color:
<p><div style=padding:5px;width:80px; id=bandColorDiv><select id="bandColorSelect" onChange=bandColorSelected()>
<option value="#000000">Black</option>
<option value="#008080">Teal</option>
<option value="#483C32">Taupe</option>
<option value="#964B00">Brown</option>
<option value="#E0B0FF">Mauve</option>
</select></div></p>
<!--<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 frameColorSelected()
{
    var frameColor=frameColorSelect.options[frameColorSelect.selectedIndex].value
    var svgDoc = document.getElementById('svg3436');
    var paths = svgDoc.getElementsByTagName("path");
    var path = paths[0];
    path.style.fill= frameColor;
    frameColorDiv.style.background=frameColor
}
function bandColorSelected()
{
    var bandColor=bandColorSelect.options[bandColorSelect.selectedIndex].value
    var svgDoc = document.getElementById('svg3436');
    var paths = svgDoc.getElementsByTagName("path");
    var path = paths[1];
    var path1 = paths[2];

    path.style.fill= bandColor;
    path1.style.fill= bandColor;

    bandColorDiv.style.background=bandColor
}
</script>
</body>
</head>
</html>

关于javascript - 要求用户从调色板中选择一种颜色并通过 JavaScript 修改 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40555099/

上一篇：html - 搜索栏标题

下一篇：html - 如何让文本在CSS中改变颜色？

相关文章：

html - 全宽标题和图像 CSS

javascript - Chrome 扩展内容脚本 CSS 未注入(inject)

javascript - 我无法让 Fluidbox (v1.3) 工作...？

html - 文本表单框 HTML 背景图像

JQuery - 返回默认函数

javascript - 限制在页面加载期间显示的 div

javascript - 在 SVG 中嵌入 JavaScript

javascript - 如何在 Javascript 中对哈希表进行排序？

javascript - 无法设置属性...只有 Getter (javascript es6)

javascript - 如何在 JS 中增加 div 的 top 属性？

©2024 IT工具网  联系我们