Javascript-форум - Тупик: resize SVG - связные елементы

core,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style type="text/css">
  .red {background:#e74c3c!important}
	.blue {background:#3498db!important}
	.green {background:#2ecc71!important}
	.black {background:#34495e!important; }
	.center {text-align: center; padding: 5px; }
	.white{color:#fff!important}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
function transform(arr, num)
{
  arr.forEach(function(item) {
       var el = $(item.el),
       val = +el.attr(item.attr)+ (item.half ? num/2 : num);
       el.attr(item.attr,val);
  });
}

var winOne = [{el : '#svg_4',attr : 'width'},
           {el : '#svg_13',attr : 'width'},
           {el : '#svg_16',attr : 'width'},
           {el : '#svg_39',attr : 'x2'},
           {el : '#svg_40',attr : 'x2'},
           {el : '#svg_41',attr : 'x2',half: true},
           {el : '#svg_43',attr : 'x1',half: true},
           {el : '#svg_43',attr : 'x2'},
           {el : '#svg_32',attr : 'cx'},
           {el : '#svg_61',attr : 'x'},
           {el : '#svg_62',attr : 'cx'},
           {el : '#svg_63',attr : 'x'},
           {el : '#svg_53',attr : 'x'},
           {el : '#svg_54',attr : 'x'},
           {el : '#svg_57',attr : 'x1'},
           {el : '#svg_57',attr : 'x2'},
           {el : '#svg_58',attr : 'x1'},
           {el : '#svg_58',attr : 'x2'},
           {el : '#svg_59',attr : 'x1'},
           {el : '#svg_59',attr : 'x2'},
           {el : '#svg_60',attr : 'x1'},
           {el : '#svg_60',attr : 'x2'}];

$('#plusSizeL').on('click',function(){
transform(winOne, 5);
 });
$('#minSizeL').on('click',function(){
transform(winOne, -5);
 });

var winTwo = [{el : '#svg_4',attr : 'width'},
           {el : '#svg_53',attr : 'width'},
           {el : '#svg_54',attr : 'width'},
           {el : '#svg_57',attr : 'x2',half: true},
           {el : '#svg_58',attr : 'x1',half: true},
           {el : '#svg_58',attr : 'x2'},
           {el : '#svg_59',attr : 'x1'},
           {el : '#svg_60',attr : 'x1'}];
$('#plusSizeR').on('click',function(){
transform(winTwo, 5);
 });
$('#minSizeR').on('click',function(){
transform(winTwo, -5);
 });
});
  </script>
</head>

<body>
  <section>
<div class="container">
  <div class="col-md-7 " >
                       		<div class="previewWindow " style="margin:20px; border:1px solid #dedede; height:450px;">

 <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
   <defs>
    <linearGradient y2="0" x2="0" y1="0" x1="0" id="svg_34">
     <stop offset="0" stop-opacity="0.996094" stop-color="#005fbf"/>
     <stop offset="1" stop-opacity="0.996094" stop-color="#aaffff"/>
    </linearGradient>
    <filter id="svg_13_blur">
     <feGaussianBlur stdDeviation="0" in="SourceGraphic"/>
    </filter>
   </defs>

<g>
  <rect stroke="#4c4c4c" id="svg_4" height="348.000003" width="430" y="19.937579" x="69.937579" fill-opacity="null" fill="#fff"/>
  <rect filter="url(#svg_13_blur)" stroke="#000" id="svg_13" height="330" width="200" y="30" x="80.558659" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
  <rect stroke="#878787" id="svg_16" height="290" width="160" y="50" x="100" fill-opacity="0.2" fill="url(#svg_34)"/>

  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_39" y2="190.839194" x2="258.478307" y1="51.671767" x1="101.592968" fill-opacity="0.4" fill="none"/>
  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_40" y2="190.839194" x2="258.478307" y1="338.509754" x1="106.010662" fill-opacity="0.4" fill="none"/>
  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_41" y2="51.137091" x2="178.318907" y1="338.509754" x1="101.622278" fill-opacity="0.4" fill="none"/>
  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_43" y2="338.571435" x2="258.444753" y1="51.162284" x1="178.077704" fill-opacity="0.4" fill="none"/>

  <rect filter="url(#svg_13_blur)" stroke="#000" id="svg_53" height="330" width="200" y="30.022502" x="289.517465" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
  <rect stroke="#878787" id="svg_54" height="290" width="160" y="50.022502" x="308.958805" fill-opacity="0.2" fill="url(#svg_34)"/>

  <ellipse stroke="#000" ry="5.06188" rx="5.06188" id="svg_32" cy="208.263341" cx="270.769034" stroke-width="0" fill="#999999"/>
  <rect id="svg_61" height="31.871533" width="6.999239" y="207.102468" x="267.283416" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#878787" fill="#cccccc"/>
  <ellipse stroke="#000" ry="5.06188" rx="5.06188" id="svg_62" cy="208.119455" cx="299.402234" stroke-width="0" fill="#999999"/>
  <rect id="svg_63" height="31.871533" width="6.999239" y="206.958583" x="295.916616" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#878787" fill="#cccccc"/>

  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_57" y2="51.159594" x2="387.277712" y1="338.532256" x1="310.581083" fill-opacity="0.4" fill="none"/>
  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_58" y2="338.593937" x2="467.403558" y1="51.184786" x1="387.03651" fill-opacity="0.4" fill="none"/>
  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_59" y2="189.785714" x2="310.401788" y1="51.619053" x1="467.380953" fill-opacity="null" fill="none"/>
  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_60" y2="189.261899" x2="310.401778" y1="338.372029" x1="467.505958" fill-opacity="null" fill="none"/>
 </g>

</svg>


                       		</div>
                       </div>
             <div class="col-md-5 black">
             	<div class="previewWindow " style="margin:20px; border:1px solid #dedede; height:430px;">
                       		<div class="white center"><h2>Left window</h2></div>
                       		<div class="center">
                       		<div id="plusSizeL" class="btn btn-danger"> Plus size +</div>
                       		<div id="minSizeL" class="btn btn-info" > Minus size -</div>
                       		</div>
                       		<div class="white center"><h2>Right window</h2></div>
                       		<div class="center">
                       		<div id="plusSizeR" class="btn btn-danger"> Plus size +</div>
                       		<div id="minSizeR" class="btn btn-info" > Minus size -</div>
                       		</div>
                       		</div>

             </div>


             </div>
           </section>

</body>
</html>