jQuery：在单独的DIV上克隆并剪切SVG图像的一部分

Question

我有一个定义红色正方形，橙色圆圈和绿色圆圈的SVG图像：

目标是在一个单独的div上显示图像的一部分/剪辑（从像素50,50到100,100，例如仅突出显示绿色圆圈的区域），但是我不知道如何重新分配＆＃39; viewBox＆＃39;值：

<svg width='200' height='200' id='main' viewBox='0 0 100 100'>
  <rect x='10' y='10' width='80' height='80' fill='red'></rect>
  <circle cx='25' cy='25' r='25' fill='orange'></circle>
  <circle cx='75' cy='75' r='25' fill='green'></circle>
</svg>
<div id='portion'></div>

JsFiddle

<script type='text/javascript'>
svgclone = $('#main').clone();

svgclone.width(50);
svgclone.height(50);
$('#portion').html(svgclone);
</script>

是否有任何技巧或解决方法可以在单独的容器上显示原生SVG的特定部分（不是从原点0,0开始）？