SVG - have line centered vertically without knowing svg height - svg

Question

I have different SVGs in the project. I need to be able to programatically add a line element at the exact vertical middle of each SVG.
I tried to set the y1 and y2 coordinates as ‘50%’ but that is not honored when the SVG is scaled either by transform scale or viewBox. One of my other requirements is to have those SVGs scaled often.
I could ,of course, start calculating bounding box of each SVG on each scale change, and from there the vertical input but that sounds not elegant
The example is just something to work on. It has a line vertical coordinates set to 50% which are not honoured when a viewBox is set (button click). The blue line is no longer at the middle of the SVG when scaled...
function myFunction(){
document.getElementById("maxi").setAttribute("viewBox","0,0,492,124");
}
<svg id="maxi" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="246" height="62" font-size="23px" xml:space="preserve" >
<line id="greenline" x1="0" y1="31" x2="232" y2="31" stroke="#00FF00" stroke-width="4"/>
<line id="blueline" x1="0" y1="50%" x2="232" y2="50%" stroke="#0000FF"/>
<path class="cutContour" fill="none" stroke="#EC008C" stroke-miterlimit="3.8637" d="M6.8,2.3H225
c2.3,0,4.3,1.9,4.3,4.3v48.2c0,2.3-1.9,4.3-4.3,4.3H6.8c-2.3,0-4.3-1.9-4.3-4.3V6.6C2.5,4.2,4.4,2.3,6.8,2.3z"/>
</svg>
<input type="button" value="Click Me" onClick="myFunction();">

Answer 1

If the position of the line in the image doesn't need to vary - in other words if it's a static image - then transforms or viewBox manipulation is not required to resize the image. You can vary the CSS (or HTML attributes) of the SVG tag itself to resize the image. It is common to express the coordinates of the line as absolute values rather than percentages, but as you can see from #line2 below, the effect is identical:
For example (with jQuery):
<style>
svg {
outline: 1px dotted grey;
width: 300px;
}
#shrink {
display: none;
}
#line1 {
stroke: red;
stroke-width: 5px;
}
#line2 {
stroke: white;
stroke-width: 2px;
}
</style>
<p>
<button id="grow">Grow</button>
<button id="shrink">Shrink</button>
</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 0 300 100">
<line x1="-50" y1="50" x2="150" y2="50" id="line1"/>
<line x1="-40" y1="50%" x2="140" y2="50%" id="line2"/>
</svg>
<script>
$(function() {
$('#grow').click(function() {
$('svg').animate({
width: "800px"
}, 500, function() {
$('#grow').hide();
$('#shrink').show();
});
});
$('#shrink').click(function() {
$('svg').animate({
width: "300px"
}, 500, function() {
$('#shrink').hide();
$('#grow').show();
});
});
});
</script>
Codepen: https://codepen.io/MSCAU/pen/eLMOVj with additional CIRCLE and RECT behind the lines.

Answer 2

I'm not very sure I understand what you are asking. Please take a look & tell me if this is what you need.
function myFunction(){
let newWidth = 492;
document.getElementById("maxi").setAttribute("viewBox",`0,0,${newWidth},124`);
blueline.setAttributeNS(null,"x1", newWidth/2);
blueline.setAttributeNS(null,"x2", newWidth/2);
blueline.setAttributeNS(null,"y2", 124);
}
svg{border:1px solid;}
<svg id="maxi" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="246" height="62" font-size="23px" xml:space="preserve" >
<line id="greenline" x1="0" y1="31" x2="232" y2="31" stroke="#00FF00" stroke-width="4"/>
<line id="blueline" x1="123" y1="0" x2="123" y2="62" stroke="#0000FF"/>
<path class="cutContour" fill="none" stroke="#EC008C" stroke-miterlimit="3.8637" d="M6.8,2.3H225
c2.3,0,4.3,1.9,4.3,4.3v48.2c0,2.3-1.9,4.3-4.3,4.3H6.8c-2.3,0-4.3-1.9-4.3-4.3V6.6C2.5,4.2,4.4,2.3,6.8,2.3z"/>
</svg>
<input type="button" value="Click Me" onClick="myFunction();">