Html 使SVG具有响应性

下面是我使用的CSS类，我无法更改HTML结构中的任何内容。有可能制造下面的容器吗 有反应的

使用的CSS类

#container {
    border: 1px solid #C0C0C0;
    background-color: #F0F0F0;
    border-radius: 10px;
    width: 100%;
    height: 65px;
    margin-right: auto;
    margin-left: auto;
}

.container-height {
    height: 52px !important;
}

HTML代码

<div id="container" class="container-height">
  <svg overflow="hidden" width="960" height="65"><defs></defs>
    <rect fill="rgb(255, 255, 255)" fill-opacity="1" stroke="none" stroke-opacity="0" stroke-width="1" 
  stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="9.5" y="9" width="941" height="32" ry="0" rx="0" fill-rule="evenodd"></rect>
    <g clip-path="url(#gfx_clip1)"><g><g><rect fill="rgb(105, 150, 45)" fill-opacity="1" stroke="rgb(247, 247, 247)" stroke-opacity="1" stroke-width="2" 
    stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="10.5" y="10" width="939.0000000000001" height="30" ry="0" rx="0" fill-rule="evenodd" 
    stroke-dasharray="none" dojoGfxStrokeStyle="solid"></rect></g><g><rect fill="rgb(0, 61, 140)" fill-opacity="1" stroke="rgb(247, 247, 247)" stroke-opacity="1" 
    stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="10.5" y="10" width="0" height="30" ry="0" rx="0" fill-rule="evenodd" 
    stroke-dasharray="none" dojoGfxStrokeStyle="solid"></rect></g></g></g><clipPath id="gfx_clip1"><rect x="10.5" y="10" width="939" height="30"></rect>
      </clipPath><g><line fill="none" fill-opacity="0" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="0" stroke-linecap="butt" stroke-linejoin="miter" 
    stroke-miterlimit="4" x1="10.5" y1="40" x2="949.5" y2="40" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line><line fill="none" fill-opacity="0" 
    stroke="rgb(102, 102, 102)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x1="10.5" y1="40" 
    x2="10.5" y2="40" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line><line fill="none" fill-opacity="0" stroke="rgb(102, 102, 102)" stroke-opacity="1" 
    stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x1="232.59082308420057" y1="40" x2="232.59082308420057" y2="40" 
    stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line><line fill="none" fill-opacity="0" stroke="rgb(102, 102, 102)" stroke-opacity="1" stroke-width="1" 
    stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x1="454.68164616840113" y1="40" x2="454.68164616840113" y2="40" stroke-dasharray="none" 
    dojoGfxStrokeStyle="solid"></line>
      <line fill="none" fill-opacity="0" stroke="rgb(102, 102, 102)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" 
      stroke-miterlimit="4" x1="676.7724692526017" y1="40" x2="676.7724692526017" y2="40" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line>
        <line fill="none" fill-opacity="0" stroke="rgb(102, 102, 102)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" 
        stroke-miterlimit="4" x1="898.8632923368023" y1="40" x2="898.8632923368023" y2="40" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></line></g>
    </svg>
</div>

下面是一把小提琴

---

你的意思是这样的-如果你不能添加viewBox属性，那么你会很挣扎。我不想在生产过程中触及html部分本身，有没有一种方法可以单独使用css来实现这一点@保利_D@Shane您可以使用javascript来操作它。但是CSS本身，没有添加溢出：隐藏；到#容器