5

Только учусь писать на Django. Хочу сделать веб-приложение по выбору инженерного оборудования. При выборе из выпадающего списка хочу чтобы изменялась не вся схема, а только тот модуль, который изменен. Вариантов для каждого модуля много.

Думаю, можно ли нарисовать схему в SVG и уже ее менять как модуль? Подскажите как решаете такой вопрос? Поделитесь опытом, пожалуйста.

Например, для данной схемы меняю для модулей Т11 и Т21 характеристику и хочу поменять только их. Исходное значение: введите сюда описание изображения Значение после изменения характеристики: введите сюда описание изображения

Всем заранее спасибо!

Пример получившегося SVG

$('#scheme .module').each(function(i, m) {
  let moduleId = m.id;

  $('.option', m).each((optionNo) => {
    let but = document.createElement('button');
    $(but)
      .data('module', moduleId)
      .data('option', optionNo)
      .text(moduleId + ' type ' + optionNo);

    $('#controls').append(but);
  })
  $('#controls').append('<br>');
});

$('#controls button').click(function() {
  let moduleId = $(this).data('module');
  let optionNo = $(this).data('option');

  $('#' + moduleId + ' .option').fadeOut();
  $('#' + moduleId + ' .option').eq(optionNo).fadeIn();
});
#scheme {
  float: left;
}

#scheme .module .option~.option {
  display: none;
}

#controls {
  margin-left: 350px;
}

#controls button {
  margin: 0.2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="scheme" width="800" height="500" version="1.1" viewBox="0 0 211.67 132.29" xmlns="http://www.w3.org/2000/svg">
 <title>sheme</title>
 <path d="m158.69 122.23v-55.869h1v55.869z" fill="#007fff" stroke-width=".17556" style="paint-order:stroke fill markers"/>
 <path d="m161.19 66.362a2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2 2 2 0 0 1 2 2z" fill="#007fff" stroke-width=".53" style="paint-order:stroke fill markers"/>
 <g fill="#ff00bf">
  <path d="m146.69 122.36v-106h1v106z" opacity=".8806" stroke-width=".24181" style="paint-order:stroke fill markers"/>
  <path d="m149.19 61.362a2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2 2 2 0 0 1 2 2z" stroke-width=".53" style="paint-order:stroke fill markers"/>
  <path d="m136.49 60.862h10.742v1h-10.742z" opacity=".8806" stroke-width=".076977" style="paint-order:stroke fill markers"/>
 </g>
 <path d="m44.958 19.626h123.47v99.472h-123.47z" fill-opacity="0" stroke="#000" stroke-dasharray="2.11122, 0.527804" stroke-width=".5278" style="paint-order:stroke fill markers"/>
 <path d="m136.54 65.862h22.705v1h-22.705z" fill="#007fff" stroke-width=".11192" style="paint-order:stroke fill markers"/>
 <path d="m111.06 53.767h25.19v25.19h-25.19z" fill="#fff" stroke="#000" stroke-dasharray="0.810003, 0.810003" stroke-width=".81" style="paint-order:stroke fill markers"/>
 <g>
  <g fill="#f00">
   <circle cx="79.194" cy="61.362" r="2" stroke-width=".53" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-90)" x="-122.36" y="78.694" width="106" height="1" opacity=".8806" stroke-width=".24181" style="paint-order:stroke fill markers"/>
   <rect x="78.694" y="60.862" width="31.966" height="1" opacity=".8806" stroke-width=".13279" style="paint-order:stroke fill markers"/>
  </g>
  <rect transform="rotate(-90)" x="-122.36" y="66.694" width="106" height="1" fill="#cd2027" opacity=".8806" stroke-width=".24181" style="paint-order:stroke fill markers"/>
  <rect transform="rotate(-90)" x="-122.36" y="54.694" width="106" height="1" fill="#00f" opacity=".8806" stroke-width=".24181" style="paint-order:stroke fill markers"/>
  <rect x="67.194" y="65.862" width="43.467" height="1" fill="#cd2027" opacity=".8806" stroke-width=".15485" style="paint-order:stroke fill markers"/>
  <circle cx="67.194" cy="66.362" r="2" fill="#cd2027" stroke-width=".53" style="paint-order:stroke fill markers"/>
  <g fill="#00f">
   <rect x="55.194" y="70.862" width="55.45" height="1" opacity=".8806" stroke-width=".1749" style="paint-order:stroke fill markers"/>
   <circle cx="55.194" cy="71.362" r="2" stroke-width=".53" style="paint-order:stroke fill markers"/>
   <rect x="34.694" y="119.36" width="144" height=".2" opacity=".8806" stroke-width=".12605" style="paint-order:stroke fill markers"/>
   <rect x="34.694" y="19.362" width="144" height=".2" opacity=".8806" stroke-width=".12605" style="paint-order:stroke fill markers"/>
  </g>
  <g fill="#007fff" stroke="#000">
   <rect x="167.71" y="119.56" width="10.982" height="2.8" stroke-width=".037135" style="paint-order:stroke fill markers"/>
   <rect x="86.914" y="119.59" width="53.198" height="2.7413" stroke-width=".080871" style="paint-order:stroke fill markers"/>
   <rect x="34.703" y="119.57" width="9.8937" height="2.7704" stroke-width=".098276" style="paint-order:stroke fill markers"/>
   <rect x="168.43" y="16.562" width="10.264" height="2.8" stroke-width=".07588" style="paint-order:stroke fill markers"/>
   <rect x="86.914" y="16.6" width="53.231" height="2.7683" stroke-width=".081293" style="paint-order:stroke fill markers"/>
   <rect x="34.698" y="16.566" width="10.267" height="2.7768" stroke-width=".086918" style="paint-order:stroke fill markers"/>
  </g>
  <g stroke="#000">
   <rect x="180.74" y="75.064" width="24.968" height=".11794" stroke-width=".032058" style="paint-order:stroke fill markers"/>
   <rect transform="matrix(.84826 -.52958 .88472 .46612 0 0)" x="-5.0388" y="184.69" width="25.397" height=".10442" stroke-linejoin="round" stroke-width=".085398" style="paint-order:stroke fill markers"/>
   <rect transform="matrix(.9618 -.27376 .97234 .23356 0 0)" x="-97.88" y="248.19" width="34.664" height=".14704" stroke-linejoin="round" stroke-width=".11839" style="paint-order:stroke fill markers"/>
   <rect x="11.079" y="50.606" width="24.968" height=".11794" stroke-width=".032058" style="paint-order:stroke fill markers"/>
   <rect transform="matrix(-.92463 -.38087 .89866 -.43865 0 0)" x="-103.11" y="-44.467" width="21.078" height=".078484" stroke-linejoin="round" stroke-width=".093078" style="paint-order:stroke fill markers"/>
   <rect transform="matrix(-.99024 -.13936 .98638 -.16449 0 0)" x="-230.08" y="-150.67" width="43.752" height=".15896" stroke-linejoin="round" stroke-width=".19084" style="paint-order:stroke fill markers"/>
   <rect x="10.926" y="106.01" width="24.968" height=".11794" stroke-width=".032058" style="paint-order:stroke fill markers"/>
   <rect transform="matrix(.98184 .18973 -.97477 .22321 0 0)" x="275.83" y="241.01" width="32.136" height=".11714" stroke-linejoin="round" stroke-width=".14041" style="paint-order:stroke fill markers"/>
  </g>
  <g fill="#000000" font-family="sans-serif" font-size="8.4667px" stroke-width=".26458">
   <text x="182.54907" y="72.303764" style="line-height:1.25" xml:space="preserve"><tspan x="182.54907" y="72.303764" font-family="'Times New Roman'" font-size="8.4667px" stroke-width=".26458">Ду20</tspan></text>
   <text x="12.546672" y="48.452499" style="line-height:1.25" xml:space="preserve"><tspan x="12.546672" y="48.452499" font-family="'Times New Roman'" font-size="8.4667px" stroke-width=".26458">Ду32</tspan></text>
   <text x="12.546672" y="102.72215" style="line-height:1.25" xml:space="preserve"><tspan x="12.546672" y="102.72215" font-family="'Times New Roman'" font-size="8.4667px" stroke-width=".26458">Ду25</tspan></text>
  </g>
 </g>
 <g id="modules">
    <g id="t21" class="module">
<g id="T21_V" class="option" fill="#007fff">
  <path transform="matrix(.11085 0 0 .12679 154.49 14.686)" d="m144.36 276.58 37.115-61.904 35.053 63.095-36.084-0.59545z" stroke-width="1.0016" style="paint-order:stroke fill markers"/>
  <path transform="matrix(.11085 0 0 .12679 154.44 31.963)" d="m144.36 276.58 37.115-61.904 35.053 63.095-36.084-0.59545z" stroke-width="1.0016" style="paint-order:stroke fill markers"/>
  <rect transform="rotate(-90)" x="-87.008" y="174.04" width="37.225" height="1" opacity=".8806" stroke-width=".1433" style="paint-order:stroke fill markers"/>
  <path transform="matrix(-.11085 0 0 -.12679 194.67 86.402)" d="m144.36 276.58 37.115-61.904 35.053 63.095-36.084-0.59545z" stroke-width="1.0016" style="paint-order:stroke fill markers"/>
  <path transform="matrix(.13857 0 0 .15849 149.38 36.03)" d="m144.36 276.58 37.115-61.904 35.053 63.095-36.084-0.59545z" stroke-width="1.0016" style="paint-order:stroke fill markers"/>
 </g>
 <g id="T21_P" class="option" fill="#007fff">
  <rect transform="rotate(-90)" x="-87.062" y="174.04" width="50.062" height="1" opacity=".8806" stroke-width=".16618" style="paint-order:stroke fill markers"/>
  <path transform="matrix(.13857 0 0 .15849 149.38 36.03)" d="m144.36 276.58 37.115-61.904 35.053 63.095-36.084-0.59545z" stroke-width="1.0016" style="paint-order:stroke fill markers"/>
 </g>
 <g id="T21_Т" class="option">
  <rect transform="rotate(-90)" x="-87.062" y="174.04" width="50.062" height="1" fill="#007fff" stroke-width=".16618" style="paint-order:stroke fill markers"/>
 </g>
 <g id="T21_KNv" class="option">
  <g transform="translate(-19.447 -12.237)">
   <desc>Неподвижная опора</desc>
   <title>NOpora</title>
   <rect transform="rotate(228.09)" x="-172.88" y="108.61" width="8" height="1" fill="#007fff" stroke-width=".066431" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-41.914)" x="105.11" y="168.38" width="8" height="1" fill="#007fff" stroke-width=".066431" style="paint-order:stroke fill markers"/>
  </g>
  <g transform="translate(-28.459 4.3306)" fill="#007fff" stroke="#007fff">
   <rect x="200.02" y="62.814" width="5.966" height=".96602" stroke-width=".03398" style="paint-order:stroke fill markers"/>
   <rect x="200.02" y="47.44" width="5.966" height=".96602" stroke-width=".03398" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-90)" x="-50.385" y="202.52" width="1.9804" height=".96953" stroke-linejoin="round" stroke-width=".019613" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-90)" x="-62.803" y="202.5" width="1.9804" height=".96953" stroke-width=".019613" style="paint-order:stroke fill markers"/>
   <g stroke-width=".026529">
    <rect transform="rotate(-47.801)" x="95.732" y="183.62" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(222.2)" x="-187.24" y="94.762" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(222.2)" x="-190.87" y="94.762" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(-47.801)" x="90.974" y="190.88" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(-47.801)" x="92.109" y="190.87" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
   </g>
  </g>
  <rect transform="rotate(-90)" x="-87.062" y="174.04" width="18.958" height="1" fill="#007fff" stroke-width=".10226" style="paint-order:stroke fill markers"/>
  <rect transform="rotate(-90)" x="-51.807" y="174.03" width="14.807" height="1" fill="#007fff" stroke-width=".090379" style="paint-order:stroke fill markers"/>
 </g>
 <g id="T21_KNn" class="option">
  <g transform="translate(-28.459 4.3306)" fill="#007fff" stroke="#007fff">
   <rect x="200.02" y="62.814" width="5.966" height=".96602" stroke-width=".03398" style="paint-order:stroke fill markers"/>
   <rect x="200.02" y="47.44" width="5.966" height=".96602" stroke-width=".03398" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-90)" x="-50.385" y="202.52" width="1.9804" height=".96953" stroke-linejoin="round" stroke-width=".019613" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-90)" x="-62.803" y="202.5" width="1.9804" height=".96953" stroke-width=".019613" style="paint-order:stroke fill markers"/>
   <g stroke-width=".026529">
    <rect transform="rotate(-47.801)" x="95.732" y="183.62" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(222.2)" x="-187.24" y="94.762" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(222.2)" x="-190.87" y="94.762" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(-47.801)" x="90.974" y="190.88" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(-47.801)" x="92.109" y="190.87" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
   </g>
  </g>
  <rect transform="rotate(-90)" x="-87.062" y="174.04" width="18.958" height="1" fill="#007fff" stroke-width=".10226" style="paint-order:stroke fill markers"/>
  <rect transform="rotate(-90)" x="-51.807" y="174.03" width="14.807" height="1" fill="#007fff" stroke-width=".090379" style="paint-order:stroke fill markers"/>
  <g transform="translate(-28.459 4.3306)" fill="#007fff" stroke="#007fff">
   <rect x="200.02" y="62.814" width="5.966" height=".96602" stroke-width=".03398" style="paint-order:stroke fill markers"/>
   <rect x="200.02" y="47.44" width="5.966" height=".96602" stroke-width=".03398" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-90)" x="-50.385" y="202.52" width="1.9804" height=".96953" stroke-linejoin="round" stroke-width=".019613" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-90)" x="-62.803" y="202.5" width="1.9804" height=".96953" stroke-width=".019613" style="paint-order:stroke fill markers"/>
   <g stroke-width=".026529">
    <rect transform="rotate(-47.801)" x="95.732" y="183.62" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(222.2)" x="-187.24" y="94.762" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(222.2)" x="-190.87" y="94.762" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(-47.801)" x="90.974" y="190.88" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(-47.801)" x="92.109" y="190.87" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
   </g>
  </g>
  <rect transform="rotate(-90)" x="-87.062" y="174.04" width="18.958" height="1" fill="#007fff" stroke-width=".10226" style="paint-order:stroke fill markers"/>
  <rect transform="rotate(-90)" x="-51.807" y="174.03" width="14.807" height="1" fill="#007fff" stroke-width=".090379" style="paint-order:stroke fill markers"/>
  <g transform="translate(-19.535 87.063)">
   <desc>Неподвижная опора</desc>
   <title>NOpora</title>
   <rect transform="rotate(228.09)" x="-172.88" y="108.61" width="8" height="1" fill="#007fff" stroke-width=".066431" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-41.914)" x="105.11" y="168.38" width="8" height="1" fill="#007fff" stroke-width=".066431" style="paint-order:stroke fill markers"/>
  </g>
 </g>
 <g id="T21_Nn" class="option">
  <rect transform="rotate(-90)" x="-87.062" y="174.04" width="50.062" height="1" fill="#007fff" stroke-width=".16618" style="paint-order:stroke fill markers"/>
 </g>
 <g id="T21_Nv" class="option">
  <rect transform="rotate(-90)" x="-87.062" y="174.04" width="50.062" height="1" fill="#007fff" stroke-width=".16618" style="paint-order:stroke fill markers"/>
  <g id="NOpora" transform="translate(-19.447 -12.237)">
   <desc>Неподвижная опора</desc>
   <title>NOpora</title>
   <rect transform="rotate(228.09)" x="-172.88" y="108.61" width="8" height="1" fill="#007fff" stroke-width=".066431" style="paint-order:stroke fill markers"/>
   <rect transform="rotate(-41.914)" x="105.11" y="168.38" width="8" height="1" fill="#007fff" stroke-width=".066431" style="paint-order:stroke fill markers"/>
  </g>
 </g>
 <g id="T21_K" class="option">
  <g id="t21_K_komp" transform="translate(-28.459 4.3306)">
   <title>t21_K_komp</title>
   <g fill="#007fff" stroke="#007fff">
    <rect x="200.02" y="62.814" width="5.966" height=".96602" stroke-width=".03398" style="paint-order:stroke fill markers"/>
    <rect x="200.02" y="47.44" width="5.966" height=".96602" stroke-width=".03398" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(-90)" x="-50.385" y="202.52" width="1.9804" height=".96953" stroke-linejoin="round" stroke-width=".019613" style="paint-order:stroke fill markers"/>
    <rect transform="rotate(-90)" x="-62.803" y="202.5" width="1.9804" height=".96953" stroke-width=".019613" style="paint-order:stroke fill markers"/>
    <g stroke-width=".026529">
     <rect transform="rotate(-47.801)" x="95.732" y="183.62" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
     <rect transform="rotate(222.2)" x="-187.24" y="94.762" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
     <rect transform="rotate(222.2)" x="-190.87" y="94.762" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
     <rect transform="rotate(-47.801)" x="90.974" y="190.88" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
     <rect transform="rotate(-47.801)" x="92.109" y="190.87" width="3.6233" height=".96953" style="paint-order:stroke fill markers"/>
    </g>
   </g>
  </g>
  <rect transform="rotate(-90)" x="-87.062" y="174.04" width="18.958" height="1" fill="#007fff" stroke-width=".10226" style="paint-order:stroke fill markers">
   <title>t21_K_pipe2</title>
  </rect>
  <rect transform="rotate(-90)" x="-51.807" y="174.03" width="14.807" height="1" fill="#007fff" stroke-width=".090379" style="paint-order:stroke fill markers">
   <title>t21_K_pipe1</title>
  </rect>
 </g>
 <g id="Marks" display="none" fill="#000000" font-family="sans-serif" stroke-width=".26458">
  <g font-size="8.4667px">
   <text transform="rotate(-90)" x="-137.79126" y="177.83511" style="line-height:1.25" xml:space="preserve"><tspan x="-137.79126" y="177.83511" font-family="'Times New Roman'" font-size="8.4667px" font-weight="bold" stroke-width=".26458">T21</tspan></text>
   <text transform="rotate(-90)" x="-124.02296" y="164.9431" style="line-height:1.25" xml:space="preserve"><tspan x="-124.02296" y="164.9431" font-family="'Times New Roman'" font-size="8.4667px" font-weight="bold" stroke-width=".26458">T11</tspan></text>
   <text x="128.82991" y="70.750648" style="line-height:1.25" xml:space="preserve"><tspan x="128.82991" y="70.750648" font-family="'Times New Roman'" font-size="8.4667px" font-weight="bold" stroke-width=".26458">S1(1)</tspan></text>
   <text transform="rotate(-90)" x="-121.87818" y="96.919701" style="line-height:1.25" xml:space="preserve"><tspan x="-121.87818" y="96.919701" font-family="'Times New Roman'" font-size="8.4667px" font-weight="bold" stroke-width=".26458">T3</tspan></text>
   <text transform="rotate(-90)" x="-130.84679" y="85.489937" style="line-height:1.25" xml:space="preserve"><tspan x="-130.84679" y="85.489937" font-family="'Times New Roman'" font-size="8.4667px" font-weight="bold" stroke-width=".26458">T4</tspan></text>
   <text transform="rotate(-90)" x="-123.27343" y="73.220779" style="line-height:1.25" xml:space="preserve"><tspan x="-123.27343" y="73.220779" font-family="'Times New Roman'" font-size="8.4667px" font-weight="bold" stroke-width=".26458">В1</tspan></text>
  </g>
  <text transform="rotate(-90)" x="-123.27343" y="43.710255" font-size="10.583px" style="line-height:1.25" xml:space="preserve"><tspan x="-123.27343" y="43.710255" font-family="'Times New Roman'" font-weight="bold" stroke-width=".26458"/></text>
 </g>
    </g>
 </g>

</svg>
<div id="controls"></div>

4
  • 1
    На мой взгляд, это наилучший подход. Вы можете использовать любой векторный графический редактор для подготовки схем и вариантов конфигурации. Затем при помощи JS на сайте отображаете нужные компоненты. Т.е. Вам достаточно будет нарисовать одну схему со всеми модулями и их вариантами, один файл SVG, а на сайте показываете только элементы требуемой конфигурации. 11 мая 2022 в 8:38
  • Спасибо за ответ! Это должна быть одна схема со всеми модулями, а скриптом я просто отключаю видимость все не нужные? Или я должен создать все модули и уже их подгружать в итоговую схему? 11 мая 2022 в 8:59
  • 1
    Да, скорее всего, я так бы и делал. Весь цикл подготовки, публикации и взаимодействия со схемой понятен. Всё уже на своих местах, только видимость задавай. На счет подгружать, думаю, это зависит от размера схемы, количества модулей и вариаций. Если элементов там не тысячи, то нет смысла. 11 мая 2022 в 9:16
  • 1
    Варианта три: 1. Вы извращенец и пишите всё это на HTML; 2. Вы умный и делаете это на canvas; 3. Вы хитрый и делаете это на SVG. Лично я вижу следующих плюс от SVG, что оно как и HTML имеет возможность прятать\показывать свои элементы\слои, тем самым вы можете создать один элемент SVG, в котором будут все возможные варианты, которые просто будете вкл\выкл, в зависимости от выбранного модуля
    – De.Minov
    11 мая 2022 в 10:15

1 ответ 1

7

Я набросал пример, чтобы продемонстрировать как это может выглядеть. Схему нарисовал в Corel, неизменяемая часть в одном слое, модули с вариантами сгруппированы в отдельном слое. Ну а дальше забавляемся с опциями:

$('#scheme .module').each(function(i, m) {
  let moduleId = m.id;

  $('.option', m).each((optionNo) => {
    let but = document.createElement('button');
    $(but)
      .data('module', moduleId)
      .data('option', optionNo)
      .text(moduleId + ' type ' + optionNo);

    $('#controls').append(but);
  })
  $('#controls').append('<br>');
});

$('#controls button').click(function() {
  let moduleId = $(this).data('module');
  let optionNo = $(this).data('option');

  $('#' + moduleId + ' .option').fadeOut();
  $('#' + moduleId + ' .option').eq(optionNo).fadeIn();
});
#scheme {
  float: left;
}

#scheme .module .option~.option {
  display: none;
}

#controls {
  margin-left: 350px;
}

#controls button {
  margin: 0.2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="scheme" xmlns="http://www.w3.org/2000/svg" width="328" height="341" viewBox="0 0 111.718 116.145">
  <defs>
    <style>.str4,.str5{stroke:#000;stroke-width:.257463}.str4{stroke-width:1.02174}.str0,.str1,.str2,.str3{stroke:#00f;stroke-width:1.02174}.str1,.str2,.str3{stroke:#69f}.str1,.str3{stroke:red}.str3{stroke:#f0f}.fil0{fill:none}.fil1{fill:#000}.fil6{fill:#69f}.fil4{fill:#f0f;fill-rule:nonzero}.fnt0{font-weight:400;font-size:8px;font-family:Arial;}</style>
  </defs>
  <g id="fixed">
    <path class="fil0 str0" d="M8.85 8.856v107.289"/>
    <path class="fil0 str1" d="M17.365 8.856v107.289M25.88 8.856v107.289"/>
    <path class="fil0 str2" d="M102.515 8.856v107.289"/>
    <path class="fil0 str3" d="M94 8.856v107.289"/>
    <path class="fil0 str4" d="M.511.511h110.696v110.525H.511z"/>
    <path class="fil0 str3" d="M68.455 51.431H94"/>
    <path class="fil0 str2" d="M68.455 59.776h34.06"/>
    <path class="fil0 str1" d="M25.88 51.029h17.03M17.365 58.182H42.91"/>
    <path class="fil0 str0" d="M8.849 65.335H42.91"/>
    <text x="164" y="-47.344" class="fil1 fnt0" transform="rotate(-90 194.997 50.715)">T11</text>
    <text x="164" y="-47.344" class="fil1 fnt0" transform="rotate(-90 206.492 53.696)">T21</text>
    <path class="str4" style="fill:#fff" d="M42.91 42.916h25.545v25.545H42.91z"/>
  </g>
  <g id="modules">
    <g id="t11" class="module">
      <g id="t11-1" class="option">
        <path class="str5" style="fill:#fcc" d="M91.896 20.407h4.208v12.152h-4.208z"/>
        <path class="fil0 str4" d="m92.474 13.089 3.405 3.406"/>
        <path class="fil0 str4" d="m92.474 16.495 3.405-3.406"/>
      </g>
      <g id="t11-2" class="option">
        <path class="fil4" d="M96.409 13.673h-4.817L94 8.856l2.409 4.817zM95.205 11.264"/>
        <path class="fil4" d="M96.409 18.49h-4.817L94 13.673l2.409 4.817zM95.205 16.08"/>
        <path class="fil4" d="M96.409 23.307h-4.817L94 18.49l2.409 4.817zM95.205 20.898"/>
        <path class="fil4" d="M96.409 28.124h-4.817L94 23.307l2.409 4.817zM95.205 25.715"/>
        <path class="fil4" d="M96.409 32.94h-4.817L94 28.125l2.409 4.817zM95.205 30.533"/>
      </g>
    </g>
    <g id="t21" class="module">
      <path id="t21-1" class="option str5" d="m100.818 32.528 3.393-14.767h-3.393l3.393 14.767h-3.393zM102.515 32.528" style="fill:#ff0;fill-rule:nonzero"/>
      <g id="t21-2" class="option">
        <circle class="fil6" cx="102.515" cy="11.264" r="2.555"/>
        <circle class="fil6" cx="102.515" cy="16.373" r="2.555"/>
        <circle class="fil6" cx="102.515" cy="21.483" r="2.555"/>
        <circle class="fil6" cx="102.515" cy="26.592" r="2.555"/>
        <circle class="fil6" cx="102.515" cy="31.701" r="2.555"/>
      </g>
    </g>
  </g>
</svg>

<div id="controls"></div>

P.S. Я совершенно не ведаю, что нарисовал ;)

7
  • Круто!!! Я примерно такое и хочу. Вот только разбираюсь в вопросе. Писал приложение для Autocad на VBA, а теперь хочу попробовать свои силы в Django и веб-ресурсами потому как нравится больше. Ты каждый вариант элемента в отдельный слой убирал? Только так его можно скрыть? 11 мая 2022 в 12:10
  • 1
    Каждый модуль является группой с классом .module. Каждая опция внутри является также группой с классом .option. Внутри уже геометрия. В SVG нет такого понятия "слой", всё преобразуется в группы. Вот так это выглядит у меня в Corel. 11 мая 2022 в 12:22
  • А в CSS я просто добавил правило #scheme .module .option~.option, которое в каждом модуле скрывает все опции, кроме первой. 11 мая 2022 в 12:32
  • 1
    Проверил, всё работает, прокрутите вниз, там кнопки, опции переключаются. SVG-документ большой 1920x1080px. При экспорте лучше ставить галку "только выделенные". 11 мая 2022 в 14:10
  • 1
    Это сложно, я плохо знаком с современными курсами/учебниками. Попробуйте этот и этот. Кстати, в своем решении я использовал библиотеку jQuery. 11 мая 2022 в 14:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.