Question

我试图通过JS Color库修改SVG图像。当我将SVG图像的ID传递给我的JavaScript函数时，该函数会适当地更改＆＃34;整个＆＃34; SVG背景整体。但是，当我将SVG路径ID传递给该函数时，它没有做任何事情。请参阅以下代码以供参考：

<html>
<head>
<body>

<script src="jscolor.js"></script>

<p>'onchange' fires after the mouse button is released

<p>Rectangle color:
<input class="jscolor" onchange="update(this.jscolor)" value="cc66ff">

<p id="rect" style="border:1px solid gray; width:161px; height:100px;">
<svg id="svg3436" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="297mm" width="210mm" 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) {

    document.getElementById('path3761').style.backgroundColor = '#' + jscolor
}
</script>


<p style="margin-top:3em;">Check out <a href="http://jscolor.com/examples/">more examples at jscolor.com</a>!</p>
</body>
</head>
</html>

我想更新SVG中的路径，并根据用户从调色板中选择的颜色更改颜色。如果我提供SVG ID，它确实识别颜色并改变它;但是路径ID没有这样做。我想我需要＆＃34;告诉＆＃34; JS函数有路径。我该怎么办？

Answer 1

HeJ小鼠！

路径必须 style.fill而不是style.backGroundcolor 。

this.jscolor可能意味着使用该库。无论如何，要使此示例正常工作，请使用update(value)。值是指input元素的值。当然，您必须满足您的需求并使其适用于此库。

＆＃13;

<body>

<input class="jscolor" onclick="update(value)" value="cc66ff">

<svg id="svg3436" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="297mm" width="210mm" 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">
 <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) {

    document.getElementById('path3761').style.fill = '#' + jscolor
}
</script>
</body>

＆＃13;

使用JavaScript更改SVG路径的颜色（JS颜色库）

1 个答案: