Как перенести свойства от образца rect на панели, выполненной в SVG

Question

Только учусь. Вообще деревянный. Подскажите как сделать так, чтобы свойства от образца (например, rect с полным синим заполнением - получить это значение кликом левой кнопкой) назначить rect на панели?

В дальнейшем хочу создать палитру из различных вариантов, на каждый из которых можно кликать и переносить значения заполнения rect на панели.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Конфигурация архитектурного решения наружной стеновой панели</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <title>BS-v5</title>

</head>
<body>
<div class="col-lg-2">
    <svg width="1200" height="1200" id="panel_case" version="1.1" viewBox="0 0 317.5 317.5" xmlns="http://www.w3.org/2000/svg" class="droppable">
 <g fill="#fff" stroke="#000" stroke-dasharray="0.190442, 0.571326" stroke-width=".19044">
  <rect x="66.241" y="26.554" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_1_7</title>
  </rect>
  <rect x="92.699" y="26.554" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_2_7</title>
  </rect>
  <rect x="119.16" y="26.554" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_3_7</title>
  </rect>
  <rect x="145.62" y="26.554" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_4_7</title>
  </rect>
  <rect x="172.07" y="26.554" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_5_7</title>
  </rect>
  <rect x="198.53" y="26.554" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_6_7</title>
  </rect>
  <rect x="224.99" y="26.554" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_7_7</title>
  </rect>
  <rect x="66.241" y="53.012" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_1_6</title>
  </rect>
  <rect x="92.699" y="53.012" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_2_6</title>
  </rect>
  <rect x="119.16" y="53.012" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_3_6</title>
  </rect>
  <rect x="145.62" y="53.012" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_4_6</title>
  </rect>
  <rect x="172.07" y="53.012" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_5_6</title>
  </rect>
  <rect x="198.53" y="53.012" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_6_6</title>
  </rect>
  <rect x="224.99" y="53.012" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_7_6</title>
  </rect>
  <rect x="66.241" y="79.47" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_1_5</title>
  </rect>
  <rect x="92.699" y="79.47" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_2_5</title>
  </rect>
  <rect x="119.16" y="79.47" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_3_5</title>
  </rect>
  <rect x="145.62" y="79.47" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_4_5</title>
  </rect>
  <rect x="172.07" y="79.47" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_5_5</title>
  </rect>
  <rect x="198.53" y="79.47" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_6_5</title>
  </rect>
  <rect x="224.99" y="79.47" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_7_5</title>
  </rect>
  <rect x="66.241" y="105.93" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_1_4</title>
  </rect>
  <rect x="92.699" y="105.93" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_2_4</title>
  </rect>
  <rect x="119.16" y="105.93" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_3_4</title>
  </rect>
  <rect x="145.62" y="105.93" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_4_4</title>
  </rect>
  <rect x="172.07" y="105.93" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_5_4</title>
  </rect>
  <rect x="198.53" y="105.93" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_6_4</title>
  </rect>
  <rect x="224.99" y="105.93" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_7_4</title>
  </rect>
  <rect x="66.241" y="132.39" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_1_3</title>
  </rect>
  <rect x="92.699" y="132.39" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_2_3</title>
  </rect>
  <rect x="119.16" y="132.39" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_3_3</title>
  </rect>
  <rect x="145.62" y="132.39" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_4_3</title>
  </rect>
  <rect x="172.07" y="132.39" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_5_3</title>
  </rect>
  <rect x="198.53" y="132.39" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_6_3</title>
  </rect>
  <rect x="224.99" y="132.39" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_7_3</title>
  </rect>
  <rect x="66.241" y="158.85" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_1_2</title>
  </rect>
  <rect x="92.699" y="158.85" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_2_2</title>
  </rect>
  <rect x="119.16" y="158.85" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_3_2</title>
  </rect>
  <rect x="145.62" y="158.85" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_4_2</title>
  </rect>
  <rect x="172.07" y="158.85" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_5_2</title>
  </rect>
  <rect x="198.53" y="158.85" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_6_2</title>
  </rect>
  <rect x="224.99" y="158.85" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_7_2</title>
  </rect>
  <rect x="66.241" y="185.3" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_1_1</title>
  </rect>
  <rect x="92.699" y="185.3" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_2_1</title>
  </rect>
  <rect x="119.16" y="185.3" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_3_1</title>
  </rect>
  <rect x="145.62" y="185.3" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_4_1</title>
  </rect>
  <rect x="172.07" y="185.3" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_5_1</title>
  </rect>
  <rect x="198.53" y="185.3" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_6_1</title>
  </rect>
  <rect x="224.99" y="185.3" width="26.268" height="26.268" style="paint-order:stroke fill markers">
   <title>P_7_1</title>
  </rect>
 </g>
 <rect x="66.014" y="26.326" width="185.47" height="185.47" fill="none" stroke="#000" stroke-width=".26472" style="paint-order:stroke fill markers"/>
 <text x="80.00103" y="11.091475" fill="#000000" font-family="sans-serif" font-size="10.583px" stroke-width=".26458" style="line-height:1.25" xml:space="preserve"><tspan x="80.00103" y="11.091475" font-family="Candara" font-weight="bold" stroke-width=".26458">Архитектурное решение панели</tspan></text>
 <g>
  <path id="DA_horz_right_line" d="m251.49 211.67v31.75" fill="#00f" stroke="#00f" stroke-width=".26041px">
   <title>DA_horz_right line</title>
  </path>
  <path d="m73.71 236.15h170.22" fill="#00f" stroke="#00f" stroke-width=".26458"/>
  <text id="DA_horz" x="153.40128" y="235.37859" fill="#000000" font-family="sans-serif" font-size="10.583px" stroke-width=".26458" style="line-height:1.25" xml:space="preserve"><title>DA_horz</title><tspan x="153.40128" y="235.37859" fill="#0000ff" font-family="'Arial Rounded MT Bold'" stroke-width=".26458">3,50</tspan></text>
  <g fill="#00f">
   <g id="DA_horz_right_arrow" transform="translate(40.223 9.117)">
    <title>DA_horz_right arrow</title>
    <path d="m202.41 229.37c5e-3 -0.01 0.2496-0.49625 0.54213-1.0816l0.53188-1.0642-0.53201-1.0829c-0.2926-0.59559-0.53411-1.0894-0.53667-1.0974-3e-3 -0.0111 1.061 0.24702 4.4189 1.0713 2.4329 0.59722 4.4236 1.0879 4.4237 1.0905 7e-5 3e-3 -1.9868 0.4925-4.4152 1.0888-2.4284 0.59632-4.4215 1.0862-4.4291 1.0886-0.0107 3e-3 -0.0115 4.3e-4 -3e-3 -0.013zm4.2328-1.211c2.1292-0.52339 3.8643-0.9542 3.8558-0.95733-0.0272-0.01-7.7356-1.9016-7.7385-1.899-1e-3 1e-3 0.2072 0.43014 0.46384 0.9528 0.25665 0.52267 0.46863 0.94849 0.47108 0.94629 6e-3 -5e-3 -0.14546-0.32316-0.501-1.0493-0.38041-0.77695-0.39963-0.81684-0.39545-0.82061 2e-3 -2e-3 0.12182 0.0255 0.26652 0.0606 0.82944 0.20054 6.0131 1.4745 6.8974 1.6952 0.22545 0.0562 0.42015 0.10422 0.43267 0.10662 0.0125 3e-3 0.0228 7e-3 0.0228 0.011 0 3e-3 -0.1446 0.0425-0.32134 0.0863-1.098 0.2723-6.6084 1.628-7.1931 1.7696-0.0498 0.0121-0.0926 0.0202-0.095 0.0181-8e-3 -7e-3 0.0692-0.16739 0.38555-0.80223 0.39066-0.78401 0.51364-1.0358 0.5135-1.0515-9e-5 -8e-3 -0.21187 0.40816-0.47063 0.92567-0.41623 0.83244-0.47877 0.96069-0.46796 0.95984 1e-3 -1e-4 1.7446-0.42843 3.8738-0.95184z" fill="#00f" stroke="#000" stroke-width=".0096061" style="paint-order:stroke fill markers"/>
   </g>
   <path id="DA_horz_left_line" d="m66.012 211.67v31.75" stroke="#00f" stroke-width=".26041px">
    <title>DA_horz_left line</title>
   </path>
   <g id="DA_horz_left_arrow" transform="rotate(180 138.6 231.77)">
    <title>DA_horz_left arrow</title>
    <path d="m202.41 229.37c5e-3 -0.01 0.2496-0.49625 0.54213-1.0816l0.53188-1.0642-0.53201-1.0829c-0.2926-0.59559-0.53411-1.0894-0.53667-1.0974-3e-3 -0.0111 1.061 0.24702 4.4189 1.0713 2.4329 0.59722 4.4236 1.0879 4.4237 1.0905 7e-5 3e-3 -1.9868 0.4925-4.4152 1.0888-2.4284 0.59632-4.4215 1.0862-4.4291 1.0886-0.0107 3e-3 -0.0115 4.3e-4 -3e-3 -0.013zm4.2328-1.211c2.1292-0.52339 3.8643-0.9542 3.8558-0.95733-0.0272-0.01-7.7356-1.9016-7.7385-1.899-1e-3 1e-3 0.2072 0.43014 0.46384 0.9528 0.25665 0.52267 0.46863 0.94849 0.47108 0.94629 6e-3 -5e-3 -0.14546-0.32316-0.501-1.0493-0.38041-0.77695-0.39963-0.81684-0.39545-0.82061 2e-3 -2e-3 0.12182 0.0255 0.26652 0.0606 0.82944 0.20054 6.0131 1.4745 6.8974 1.6952 0.22545 0.0562 0.42015 0.10422 0.43267 0.10662 0.0125 3e-3 0.0228 7e-3 0.0228 0.011 0 3e-3 -0.1446 0.0425-0.32134 0.0863-1.098 0.2723-6.6084 1.628-7.1931 1.7696-0.0498 0.0121-0.0926 0.0202-0.095 0.0181-8e-3 -7e-3 0.0692-0.16739 0.38555-0.80223 0.39066-0.78401 0.51364-1.0358 0.5135-1.0515-9e-5 -8e-3 -0.21187 0.40816-0.47063 0.92567-0.41623 0.83244-0.47877 0.96069-0.46796 0.95984 1e-3 -1e-4 1.7446-0.42843 3.8738-0.95184z" fill="#00f" stroke="#000" stroke-width=".0096061" style="paint-order:stroke fill markers"/>
   </g>
   <g stroke="#00f">
    <path d="m66.146 26.324h-31.75" stroke-width=".26041px"/>
    <path d="m66.146 211.8h-31.75" stroke-width=".26041px"/>
    <path d="m41.704 34.188v169.89" stroke-width=".26458"/>
   </g>
  </g>
  <text id="DA_vert" x="17.972849" y="120.36822" fill="#000000" font-family="sans-serif" font-size="10.583px" stroke-width=".26458" style="line-height:1.25" xml:space="preserve"><title>DA_vert</title><tspan x="17.972849" y="120.36822" fill="#0000ff" font-family="'Arial Rounded MT Bold'" stroke-width=".26458">3,00</tspan></text>
  <path transform="rotate(-90 26.16 211.51)" d="m202.41 229.37c5e-3 -0.01 0.2496-0.49625 0.54213-1.0816l0.53188-1.0642-0.53201-1.0829c-0.2926-0.59559-0.53411-1.0894-0.53667-1.0974-3e-3 -0.0111 1.061 0.24702 4.4189 1.0713 2.4329 0.59722 4.4236 1.0879 4.4237 1.0905 7e-5 3e-3 -1.9868 0.4925-4.4152 1.0888-2.4284 0.59632-4.4215 1.0862-4.4291 1.0886-0.0107 3e-3 -0.0115 4.3e-4 -3e-3 -0.013zm4.2328-1.211c2.1292-0.52339 3.8643-0.9542 3.8558-0.95733-0.0272-0.01-7.7356-1.9016-7.7385-1.899-1e-3 1e-3 0.2072 0.43014 0.46384 0.9528 0.25665 0.52267 0.46863 0.94849 0.47108 0.94629 6e-3 -5e-3 -0.14546-0.32316-0.501-1.0493-0.38041-0.77695-0.39963-0.81684-0.39545-0.82061 2e-3 -2e-3 0.12182 0.0255 0.26652 0.0606 0.82944 0.20054 6.0131 1.4745 6.8974 1.6952 0.22545 0.0562 0.42015 0.10422 0.43267 0.10662 0.0125 3e-3 0.0228 7e-3 0.0228 0.011 0 3e-3 -0.1446 0.0425-0.32134 0.0863-1.098 0.2723-6.6084 1.628-7.1931 1.7696-0.0498 0.0121-0.0926 0.0202-0.095 0.0181-8e-3 -7e-3 0.0692-0.16739 0.38555-0.80223 0.39066-0.78401 0.51364-1.0358 0.5135-1.0515-9e-5 -8e-3 -0.21187 0.40816-0.47063 0.92567-0.41623 0.83244-0.47877 0.96069-0.46796 0.95984 1e-3 -1e-4 1.7446-0.42843 3.8738-0.95184z" fill="#00f" stroke="#000" stroke-width=".0096061" style="paint-order:stroke fill markers"/>
  <g transform="rotate(90 134.27 134.81)" fill="#00f">
   <path d="m202.41 229.37c5e-3 -0.01 0.2496-0.49625 0.54213-1.0816l0.53188-1.0642-0.53201-1.0829c-0.2926-0.59559-0.53411-1.0894-0.53667-1.0974-3e-3 -0.0111 1.061 0.24702 4.4189 1.0713 2.4329 0.59722 4.4236 1.0879 4.4237 1.0905 7e-5 3e-3 -1.9868 0.4925-4.4152 1.0888-2.4284 0.59632-4.4215 1.0862-4.4291 1.0886-0.0107 3e-3 -0.0115 4.3e-4 -3e-3 -0.013zm4.2328-1.211c2.1292-0.52339 3.8643-0.9542 3.8558-0.95733-0.0272-0.01-7.7356-1.9016-7.7385-1.899-1e-3 1e-3 0.2072 0.43014 0.46384 0.9528 0.25665 0.52267 0.46863 0.94849 0.47108 0.94629 6e-3 -5e-3 -0.14546-0.32316-0.501-1.0493-0.38041-0.77695-0.39963-0.81684-0.39545-0.82061 2e-3 -2e-3 0.12182 0.0255 0.26652 0.0606 0.82944 0.20054 6.0131 1.4745 6.8974 1.6952 0.22545 0.0562 0.42015 0.10422 0.43267 0.10662 0.0125 3e-3 0.0228 7e-3 0.0228 0.011 0 3e-3 -0.1446 0.0425-0.32134 0.0863-1.098 0.2723-6.6084 1.628-7.1931 1.7696-0.0498 0.0121-0.0926 0.0202-0.095 0.0181-8e-3 -7e-3 0.0692-0.16739 0.38555-0.80223 0.39066-0.78401 0.51364-1.0358 0.5135-1.0515-9e-5 -8e-3 -0.21187 0.40816-0.47063 0.92567-0.41623 0.83244-0.47877 0.96069-0.46796 0.95984 1e-3 -1e-4 1.7446-0.42843 3.8738-0.95184z" fill="#00f" stroke="#000" stroke-width=".0096061" style="paint-order:stroke fill markers"/>
  </g>
 </g>
</svg>
</div>

<div class="col-lg-2">
    <svg width="1200" height="1200" version="1.1" id="Wdw" viewBox="0 0 317.5 317.5" xmlns="http://www.w3.org/2000/svg">
 <title>window</title>
    <rect id="Window" x="0.0" y="0.0" width="52.536" height="52.536" fill="#00f" stroke="#00f" stroke-width=".26458" style="paint-order:stroke fill markers"/>
</svg>
</div>


<label>
  X: <input id="sliderX" type="range" min="10" max="200" value="20" onchange="moveSlider(this, 'x')">
</label>

<label>
  Y: <input id="sliderY" type="range" min="1" max="60" value="20" onchange="moveSlider(this, 'y')">
</label>

<script>
    let currentDroppable = null
    Wdw.onmousedown = function(event) {
      let shiftX = event.clientX - Wdw.getBoundingClientRect().left;
      let shiftY = event.clientY - Wdw.getBoundingClientRect().top;

      Wdw.style.position = 'absolute';
      Wdw.style.zIndex = 1000;
      document.body.append(Wdw);

      moveAt(event.pageX, event.pageY);

      function moveAt(pageX, pageY) {
        Wdw.style.left = pageX - shiftX + 'px';
        Wdw.style.top = pageY - shiftY + 'px';
      }

      function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);
        Wdw.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        Wdw.hidden = false;

        if (!elemBelow) return;

        let droppableBelow = elemBelow.closest('.droppable');
        if (currentDroppable != droppableBelow) {
          if (currentDroppable) { // null если мы были не над droppable до этого события
            // (например, над пустым пространством)
            leaveDroppable(currentDroppable);
          }
          currentDroppable = droppableBelow;
          if (currentDroppable) { // null если мы не над droppable сейчас, во время этого события
            // (например, только что покинули droppable)
            enterDroppable(currentDroppable);
          }
        }
      }

      document.addEventListener('mousemove', onMouseMove);

      Wdw.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        Wdw.onmouseup = null;
      };
    };

    function enterDroppable(elem) {
      elem.style.background = 'pink';
    }

    function leaveDroppable(elem) {
      elem.style.background = '';
        }

    Wdw.ondragstart = function() {
      return false;
    };
</script>


</body>
</html>

Answer 1

Если честно не очень силён в svg. Но если я явас правильно понял, то первое что приходит в голову - это просто смотреть на аттрибут fill у нажатого прямоугольника. В моём примере надо нажимать на одну из нижних, а потом на одну из верхних, тогда поменяется цвет у верхнего. Убрал много ненужного, т.к. для самого алгоритма они не играют роли и алгоритм будет работать вне зависимоти от кол-ва и расположения квадратиков:

const colors = document.querySelector('#colors');
const rectangles = document.querySelector('#rectangles');
let color = '';

colors.addEventListener('click', (e) => {
  color = e.target.getAttribute('fill');  
});

rectangles.addEventListener('click', (e) => {
  e.target.setAttribute('fill', color);
});

<svg width="1200" height="1200" id="panel_case" version="1.1" viewBox="0 0 317.5 317.5" xmlns="http://www.w3.org/2000/svg" class="droppable">
 <g id="rectangles" fill="#fff" stroke="#000" stroke-dasharray="0.190442, 0.571326" stroke-width=".19044">
  <rect x="2" y="2" width="32" height="32">
  </rect>
  <rect x="36" y="2" width="32" height="32">
  </rect>
  </g>
  
  <g id="colors">
  <rect x="2" y="36" width="32" height="32" fill="#fff">
  </rect>
  
  <rect x="36" y="36" width="32" height="32" fill="#f00">
  </rect>
  
  <rect x="70" y="36" width="32" height="32" fill="#0f0">
  </rect>
  
  <rect x="104" y="36" width="32" height="32" fill="#00f">
  </rect>
 </g>
</svg>

Вполне может оказаться, что я левой рукой чешу правое ухо) Потому что например в канвасе, при нажатии можно посмотреть на данные пикселя и достать оттуда цвет

БЛОГ НА HUSL

Как перенести свойства от образца rect на панели, выполненной в SVG

Ответы (1 шт):