Проблема:
Поэтому я отредактировал вопрос в соответствии с тем, чего я на самом деле пытаюсь достичь.
У меня есть три SVG, которые были созданы путем преобразования различных версий планов этажей, поэтому окно просмотра и координаты этих трех SVG не совпадают друг с другом.
То, что я сейчас пытаюсь сделать и потерпеть неудачу (также мой подход в примере / руководстве ниже), заключается в следующем:
А)
Сначала мне нужно изменить / разместить исходный SVG (limegreen) в моем примере, чтобы соответствовать второму (малиновому), и сохраняющиеся графики должны перекрываться. Я пытаюсь сделать это, рассчитав разницу в первом элементе g, который сейчас, похоже, работает нормально.
В)
Теперь мне нужно перемасштабировать / разместить его снова в третьем (аква) SVG, который в этом тестовом примере является копией оригинального (limegreen). К сожалению, я не могу перекрыть свойство ранее перекомпонованного / позиционированного SVG обратно в исходное расположение, используя тот же элемент g в качестве ссылки.
На всех этих этапах я могу настраивать / изменять только элементы path, за исключением изменения viewBox.
Пример: * * один тысяча двадцать-одна
Предполагается, что четыре круга в форме справа внизу перекрываются после обоих преобразований (лимонно-зеленый и малиновый, лимонно-зеленый и аква).
Также следует помнить, что Firefox, похоже, не поддерживает getBBox() на g элементах (всегда пусто - работает над этим), поэтому лучше тестировать в chrome.
function Transform(element, transform, svg){
var tMatrix = element.transform.baseVal.numberOfItems ? element.transform.baseVal.getItem(0).matrix : element.transform.baseVal.appendItem(svg.createSVGTransform()).matrix;
tMatrix.f = tMatrix.f + transform.f * tMatrix.d;
tMatrix.a = tMatrix.a * transform.a;
tMatrix.d = tMatrix.d * transform.d
};
function Step1(){
alert('This is my initial SVG (limegreen).');
//going to use this later on
var tSVG3 = document.querySelector('#svgStep1').cloneNode(true);
tSVG3.id = 'svgStep3';
document.body.appendChild(tSVG3);
document.querySelector('#btn1').setAttribute('disabled', 'disabled');
document.querySelector('#btn2').className = ''
};
function Step2(){
alert('This initial SVG now gets fused with a second SVG (crimson).');
document.querySelector('#svgStep1').style.opacity = '0.5';
document.querySelector('#svgStep2').style.display = 'block';
document.querySelector('#btn2').setAttribute('disabled', 'disabled');
document.querySelector('#btn3').className = ''
};
function Step3(){
alert('As we can see, the second SVG (crimson) is scaled differently (bigger) than the first one. Now to solve this issue we get the difference of those two by the group with the id "EQ_MOBILIAR" (the only group here).');
document.querySelector('#btn3').setAttribute('disabled', 'disabled');
document.querySelector('#btn4').className = ''
};
function Step4(){
alert('So first we set the viewbox of the initial SVG (limegreen) to the same values as the second SVG (crimson)');
var tPoint1 = document.querySelector('#svgStep1 > g#EQ_MOBILIAR').getBBox();
var tPoint2 = document.querySelector('#svgStep2 > g#EQ_MOBILIAR').getBBox();
window._Transformation1 = {
a: tPoint2.width / tPoint1.width,
d: tPoint2.height / tPoint1.height,
e: tPoint2.x - tPoint1.x,
f: tPoint2.y - tPoint1.y
};
var tViewBox1= document.querySelector('#svgStep1').viewBox.baseVal;
var tViewBox2 = document.querySelector('#svgStep2').viewBox.baseVal;
tViewBox1.x = tViewBox2.x;
tViewBox1.y = tViewBox2.y;
tViewBox1.width = tViewBox2.width;
tViewBox1.height = tViewBox2.height;
document.querySelector('#btn4').setAttribute('disabled', 'disabled');
document.querySelector('#btn5').className = ''
};
function Step5(){
alert('Now we adjust the matrix of each grafic (path/g) in the initial SVG (limegreen) to match the scale of the second (crimson) one.');
alert('The difference of those two SVG: \n ' + JSON.stringify(window._Transformation1));
var tSVG1 = document.querySelector('#svgStep1');
for(var tListOfElements=tSVG1.querySelectorAll('#svgStep1 > g > *'), i=0, j=tListOfElements.length; i<j; i++){
Transform(
tListOfElements[i],
window._Transformation1,
tSVG1
)
};
document.querySelector('#btn5').setAttribute('disabled', 'disabled');
document.querySelector('#btn6').className = ''
};
function Step6(){
alert('So far it works correctly. Yet now we try to fuse this new SVG (limegreen) with a copy of its inital state (aqua).');
document.querySelector('#svgStep2').style.display = 'none';
document.querySelector('#svgStep3').style.display = 'block';
document.querySelector('#btn6').setAttribute('disabled', 'disabled');
document.querySelector('#btn7').className = ''
};
function Step7(){
alert('As you can see the copy of the initial SVG (aqua) is now scaled differently (smaller) that the adjusted initial one (limegreen). So we try to reverse the process with the same steps as before.');
document.querySelector('#btn7').setAttribute('disabled', 'disabled');
document.querySelector('#btn8').className = ''
};
function Step8(){
alert('So first we set the viewbox of the initial SVG (limegreen) to the same values as the copy (aqua)');
var tPoint1 = document.querySelector('#svgStep1 > g#EQ_MOBILIAR').getBBox();
var tPoint2 = document.querySelector('#svgStep3 > g#EQ_MOBILIAR').getBBox();
/*
var tMatrixF = 0;
var tSVG1 = document.querySelector('#svgStep1');
for(var tListOfElements=tSVG1.querySelectorAll('#svgStep1 > g#EQ_MOBILIAR > *'), i=0, j=tListOfElements.length; i<j; i++){
var tElement = tListOfElements[i];
var tMatrix = tElement.transform.baseVal.numberOfItems ? tElement.transform.baseVal.getItem(0).matrix : tElement.transform.baseVal.appendItem(tSVG1.createSVGTransform()).matrix;
tMatrixF = Math.min(tMatrixF, tMatrix.f)
};
tPoint1.y = tMatrixF - tPoint1.y;
tPoint1.height = tPoint1.height + tMatrixF;
*/
window._Transformation2 = {
a: tPoint2.width / tPoint1.width,
d: tPoint2.height / tPoint1.height,
e: tPoint2.x - tPoint1.x,
f: tPoint2.y - tPoint1.y
};
var tViewBox1= document.querySelector('#svgStep1').viewBox.baseVal;
var tViewBox2 = document.querySelector('#svgStep3').viewBox.baseVal;
document.querySelector('#btn8').setAttribute('disabled', 'disabled');
document.querySelector('#btn9').className = ''
};
function Step9(){
alert('Now we adjust the matrix of each grafic (path/g) in the initial SVG (limegreen) to match the scale of the copy (aqua) one.');
alert('The difference of those two SVG: \n ' + JSON.stringify(window._Transformation2));
var tSVG1 = document.querySelector('#svgStep1');
for(var tListOfElements=tSVG1.querySelectorAll('#svgStep1 > g > *'), i=0, j=tListOfElements.length; i<j; i++){
Transform(
tListOfElements[i],
window._Transformation2,
tSVG1
)
};
document.querySelector('#btn9').setAttribute('disabled', 'disabled');
document.querySelector('#btn10').className = ''
};
function Step10(){
alert('As you can see the reverse way did not work and the initial SVG (limegreen) does not overlap with its copy (aqua).');
document.querySelector('#btn10').setAttribute('disabled', 'disabled');
};
.Hidden{
display: none
}
svg{
display: block;
background: #e6e6fa;
left: 0;
position: absolute;
top: 50px;
}
svg#svgStep1{
fill: limegreen;
outline: 1px solid green;
z-index: 2
}
svg#svgStep1 path{
fill: limegreen
}
svg#svgStep2{
display: none;
outline: 1px solid red;
z-index: 1
}
svg#svgStep2 path{
fill: crimson
}
svg#svgStep3{
display: none;
outline: 1px solid blue;
z-index: 1
}
svg#svgStep3 path{
fill: aqua
}
<body>
<!-- The original SVG -->
<svg id = 'svgStep1' xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 2000 1540' width = '703' height = '543'>
<g id="EQ_MOBILIAR">
<path d="m1501.21 1140.97h239.35v227.77l-.67 3.72l-2.37 4.04l-2.23 1.95l-3.34 1.54l-4.76 .41h-225.98z" stroke="#808080"></path>
<path d="m1258.04 1010.56l-.25 -2.37l-.73 -2.27l-1.20 -2.07l-1.59 -1.77l-1.93 -1.40l-2.18 -.97l-2.33 -.49h-2.38l-2.33 .49l-2.18 .97l-1.93 1.40l-1.59 1.77l-1.19 2.07l-.74 2.27l-.25 2.37l.25 2.37l.74 2.26l1.19 2.07l1.59 1.77l1.93 1.40l2.18 .97l2.33 .49h2.38l2.33 -.49l2.18 -.97l1.93 -1.40l1.59 -1.77l1.20 -2.07l.73 -2.26l.25 -2.37"></path>
<path d="m1309.02 1010.56l-.25 -2.37l-.74 -2.27l-1.19 -2.07l-1.60 -1.77l-1.92 -1.40l-2.18 -.97l-2.33 -.49h-2.39l-2.33 .49l-2.17 .97l-1.93 1.40l-1.60 1.77l-1.19 2.07l-.74 2.27l-.25 2.37l.25 2.37l.74 2.26l1.19 2.07l1.60 1.77l1.93 1.40l2.17 .97l2.33 .49h2.39l2.33 -.49l2.18 -.97l1.92 -1.40l1.60 -1.77l1.19 -2.07l.74 -2.26l.25 -2.37"></path>
<path d="m1258.04 1054.39l-.25 -2.37l-.73 -2.26l-1.20 -2.07l-1.59 -1.77l-1.93 -1.40l-2.18 -.97l-2.33 -.49h-2.38l-2.33 .49l-2.18 .97l-1.93 1.40l-1.59 1.77l-1.19 2.07l-.74 2.26l-.25 2.37l.25 2.37l.74 2.27l1.19 2.06l1.59 1.78l1.93 1.40l2.18 .97l2.33 .49h2.38l2.33 -.49l2.18 -.97l1.93 -1.40l1.59 -1.78l1.20 -2.06l.73 -2.27l.25 -2.37"></path>
<path d="m1309.02 1054.39l-.25 -2.37l-.74 -2.26l-1.19 -2.07l-1.60 -1.77l-1.92 -1.40l-2.18 -.97l-2.33 -.49h-2.39l-2.33 .49l-2.17 .97l-1.93 1.40l-1.60 1.77l-1.19 2.07l-.74 2.26l-.25 2.37l.25 2.37l.74 2.27l1.19 2.06l1.60 1.78l1.93 1.40l2.17 .97l2.33 .49h2.39l2.33 -.49l2.18 -.97l1.92 -1.40l1.60 -1.78l1.19 -2.06l.74 -2.27l.25 -2.37"></path>
<path d="m188.64 288.1h57.00v28.5h-57.00z"></path>
</g>
<g id = 'TEST'>
<g fill="#000" transform="matrix(0.0142676 0 0 0.0142676 50, 50)">
<g stroke-width=".39819458" transform="matrix(2.51133 0 0 2.51133 -239.06 -636.028)">
<rect width="397" height="397" x="95.790001" y="253.86" fill="#ccc" stroke="#000" stroke-width="1.19458377" stroke-miterlimit="3" ry="0" rx="0"></rect>
<path fill="#fff" d="M200.35 466.77H385.7V578.4H200.36zm.5-137.38h186.38v53H200.86zm-39.9 52.5h30.82v31.3h-30.8z"></path>
<path d="M432.04 365.12H395.3v-33.07c0-6.76-5.48-12.24-12.24-12.24H205.5c-6.75 0-12.24 5.5-12.24 12.3v33.07h-36.73c-6.76 0-12.24 5.48-12.24 12.24v120c0 6.76 5.42 12.25 12.2 12.25h36.72v64.54c0 4.07.82 7.12 3.98 10 1.48 1.35 3.05 2.22 4.96 2.76 1.77.5 3.52.46 5.32.46H381c1.8 0 3.56.05 5.33-.44 1.92-.53 3.5-1.4 4.96-2.75 3.13-2.9 3.95-5.95 3.95-10.04v-64.5H432c6.77 0 12.26-5.5 12.26-12.27v-120c0-6.78-5.5-12.26-12.27-12.26zM174.9 408.28c-5.92 0-10.72-4.8-10.72-10.72 0-5.9 4.8-10.7 10.72-10.7 5.92 0 10.7 4.8 10.7 10.7 0 5.92-4.78 10.72-10.7 10.72zm208.16 166.84H205.5v-96.74h177.56zm0-210H205.5V344.3c0-6.76 5.5-12.25 12.26-12.25h153.06c6.76 0 12.24 5.5 12.24 12.25z"></path>
</g>
</g>
<g fill="#000" transform="matrix(0.0142676 0 0 0.0142676 1950, 1500)">
<g stroke-width=".39819458" transform="matrix(2.51133 0 0 2.51133 -239.06 -636.028)">
<rect width="397" height="397" x="95.790001" y="253.86" fill="#ccc" stroke="#000" stroke-width="1.19458377" stroke-miterlimit="3" ry="0" rx="0"></rect>
<path fill="#fff" d="M200.35 466.77H385.7V578.4H200.36zm.5-137.38h186.38v53H200.86zm-39.9 52.5h30.82v31.3h-30.8z"></path>
<path d="M432.04 365.12H395.3v-33.07c0-6.76-5.48-12.24-12.24-12.24H205.5c-6.75 0-12.24 5.5-12.24 12.3v33.07h-36.73c-6.76 0-12.24 5.48-12.24 12.24v120c0 6.76 5.42 12.25 12.2 12.25h36.72v64.54c0 4.07.82 7.12 3.98 10 1.48 1.35 3.05 2.22 4.96 2.76 1.77.5 3.52.46 5.32.46H381c1.8 0 3.56.05 5.33-.44 1.92-.53 3.5-1.4 4.96-2.75 3.13-2.9 3.95-5.95 3.95-10.04v-64.5H432c6.77 0 12.26-5.5 12.26-12.27v-120c0-6.78-5.5-12.26-12.27-12.26zM174.9 408.28c-5.92 0-10.72-4.8-10.72-10.72 0-5.9 4.8-10.7 10.72-10.7 5.92 0 10.7 4.8 10.7 10.7 0 5.92-4.78 10.72-10.7 10.72zm208.16 166.84H205.5v-96.74h177.56zm0-210H205.5V344.3c0-6.76 5.5-12.25 12.26-12.25h153.06c6.76 0 12.24 5.5 12.24 12.25z"></path>
</g>
</g>
</g>
</svg>
<!-- The second SVG -->
<svg id = 'svgStep2' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1478" width = '703' height = '543'>
<g id="EQ_MOBILIAR" stroke-width="0.1">
<path d="M1440.73 916.77L1440.44 914.05L1439.6 911.46L1438.23 909.09L1436.41 907.06L1434.2 905.46L1431.7 904.35L1429.03 903.78L1426.31 903.78L1423.64 904.35L1421.14 905.46L1418.93 907.06L1417.11 909.09L1415.74 911.46L1414.9 914.05L1414.61 916.77L1414.9 919.48L1415.74 922.08L1417.11 924.44L1418.93 926.47L1421.14 928.07L1423.64 929.18L1426.31 929.75L1429.03 929.75L1431.7 929.18L1434.2 928.07L1436.41 926.47L1438.23 924.44L1439.6 922.08L1440.44 919.48L1440.73 916.77" fill="none" stroke="#000000"></path>
<path d="M1499.1 916.77L1498.82 914.05L1497.97 911.46L1496.61 909.09L1494.78 907.06L1492.57 905.46L1490.08 904.35L1487.41 903.78L1484.68 903.78L1482.01 904.35L1479.52 905.46L1477.31 907.06L1475.48 909.09L1474.12 911.46L1473.28 914.05L1472.99 916.77L1473.28 919.48L1474.12 922.08L1475.48 924.44L1477.31 926.47L1479.52 928.07L1482.01 929.18L1484.68 929.75L1487.41 929.75L1490.08 929.18L1492.57 928.07L1494.78 926.47L1496.61 924.44L1497.97 922.08L1498.82 919.48L1499.1 916.77" fill="none" stroke="#000000"></path>
<path d="M1440.73 966.97L1440.44 964.25L1439.6 961.66L1438.23 959.3L1436.41 957.27L1434.2 955.66L1431.7 954.55L1429.03 953.98L1426.31 953.98L1423.64 954.55L1421.14 955.66L1418.93 957.27L1417.11 959.3L1415.74 961.66L1414.9 964.25L1414.61 966.97L1414.9 969.68L1415.74 972.28L1417.11 974.64L1418.93 976.67L1421.14 978.28L1423.64 979.39L1426.31 979.95L1429.03 979.95L1431.7 979.39L1434.2 978.28L1436.41 976.67L1438.23 974.64L1439.6 972.28L1440.44 969.68L1440.73 966.97" fill="none" stroke="#000000"></path>
<path d="M1499.1 966.97L1498.82 964.25L1497.97 961.66L1496.61 959.3L1494.78 957.27L1492.57 955.66L1490.08 954.55L1487.41 953.98L1484.68 953.98L1482.01 954.55L1479.52 955.66L1477.31 957.27L1475.48 959.3L1474.12 961.66L1473.28 964.25L1472.99 966.97L1473.28 969.68L1474.12 972.28L1475.48 974.64L1477.31 976.67L1479.52 978.28L1482.01 979.39L1484.68 979.95L1487.41 979.95L1490.08 979.39L1492.57 978.28L1494.78 976.67L1496.61 974.64L1497.97 972.28L1498.82 969.68L1499.1 966.97" fill="none" stroke="#000000"></path>
<path d="M216.03 89.4L281.31 89.4L281.31 122.04L216.03 122.04 z" fill="none" stroke="#000000"></path>
</g>
</svg>
<button id = 'btn1' onclick = 'Step1()'>Step 1</button>
<button id = 'btn2' class = 'Hidden' onclick = 'Step2()'>Step 2</button>
<button id = 'btn3' class = 'Hidden' onclick = 'Step3()'>Step 3</button>
<button id = 'btn4' class = 'Hidden' onclick = 'Step4()'>Step 4</button>
<button id = 'btn5' class = 'Hidden' onclick = 'Step5()'>Step 5</button>
<button id = 'btn6' class = 'Hidden' onclick = 'Step6()'>Step 6</button>
<button id = 'btn7' class = 'Hidden' onclick = 'Step7()'>Step 7</button>
<button id = 'btn8' class = 'Hidden' onclick = 'Step8()'>Step 8</button>
<button id = 'btn9' class = 'Hidden' onclick = 'Step9()'>Step 9</button>
<button id = 'btn10' class = 'Hidden' onclick = 'Step10()'>Step 10</button>
</body>
Вот полное руководство со всеми paths в качестве скрипки.