使svg适合容器而不会使内容变形

Question

我试图弄清楚如何将svg元素缩放到容器的大小。 有关svg的构建，请参阅this link。缩放不应调整左或右圆的大小，也不应调整箭头的大小;相反，只有线应拉伸，但保持短划线距离完好。

有什么想法吗？

代码：

<div class="relationVis">
  <svg id="defSvg">
    <defs>
        <marker
          id           = "markerCircle"
          markerWidth  = "8"
          markerHeight = "8"
          refx         = "5"
          refy         = "5"
        >
          <circle
            cx    = "5"
            cy    = "5"
            r     = "3"
            style = "
              stroke : none;
              fill   : #000000;
            "
          />
        </marker>
        <marker
          id           = "markerArrow"
          markerWidth  = "6"
          markerHeight = "6"
          refx         = "0"
          refy         = "1.5"
          orient       = "auto"
        >
          <path
            d     = "M0,0 L0,3 L6,1.5 L0,0"
          />
        </marker>
        <marker
          id           = "markerArrowInv"
          markerWidth  = "6"
          markerHeight = "6"
          refx         = "6"
          refy         = "1.5"
          orient       = "auto"
        >
          <path
            d     = "M6,0 L6,3 L0,1.5 L6,0"
          />
        </marker>
    </defs>
</svg>
  <svg id="fromNodeSvg">
    <circle
      cx           = "25"
      cy           = "25"
      r            = "24"
      stroke       = "green"
      stroke-width = "1"
      fill         = "yellow"
    />
  </svg><!--
--><svg id="relationSvg">
    <path
      id="relationPath"
      stroke-dasharray = "10,10"
      d                = "M 35,25 l 230,0"
    />
<g transform="translate(35,25)">
  <path
      d     = "m 0,-1 l -4,1 l 4,1 l 0,-2"
      transform="scale(10)"
   />
</g>
<g transform="translate(265,25)">
  <path
      d     = "m 0,-1 l 4,1 l -4,1 l 0,-2"
      transform="scale(10)"
   />
</g>
  </svg><!--
--><svg id="toNodeSvg">
    <circle
      cx           = "25"
      cy           = "25"
      r            = "24"
      stroke       = "green"
      stroke-width = "1"
      fill         = "yellow"
    />
  </svg>
</div>