Только учусь писать на 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>