viewBox调整大小更改内部属性

Question

通过这个论坛和其他来源，我终于有一个整洁的＆＃34;缩放和重新定位＆＃34;符合我特定需求和要求的Javascript解决方案：

<script>
    var viewPortSize = 500;  // fixed for now
    var viewBoxSize  = 500;  // the zoom factor
    function updateViewBox()
    {
      min = (viewPortSize - viewBoxSize) / 2;
      max = viewBoxSize;
      str = " ";
      str = str.concat( "",  min );
      str = str.concat( " ", min );
      str = str.concat( " ", max );
      str = str.concat( " ", max );
      trackBox = document.getElementById("trackBox");
      trackBox.setAttribute( "viewBox", str );
    }

    function zoomIn()
    {
      viewBoxSize -= 50;
      updateViewBox();
    }

    function zoomOut()
    {
      viewBoxSize += 50;
      updateViewBox();
    }
</script>

此操作的目标是：

<svg id="trackBox" x="600"
     width="500" height="500"
     viewBox="0 0 500 500">
     <g>
         <circle id="trackPoint"
            cx="250" cy="250" r="5" fill="red"/>
         <path id="track" d=
            "
              M 250 250
              L 245 225
              L 200 225
              L 200 250
            "
            stroke="blue" stroke-width="1" fill="transparent"/>
      </g>
  </svg>

但是，在应用updateViewBox（）函数时，圆半径和路径笔触宽度也会放大或缩小。

是否存在一种简单的方法可以使这些属性在更改viewBox大小方面保持不变？