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

Question

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

目标是在单独的 div 上显示图像的一部分/剪辑(例如从像素 50,50 到 100,100，仅突出显示绿色圆圈的区域)，并具有缩放系数，但我不知道如何重新分配“viewBox”值:

<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>

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

Answer 1

jQuery .attr() 将属性名称转换为小写，使 viewbox 脱离 viewBox。使用通用的 .setAttribute() 代替:

svgclone.get(0).setAttribute('viewBox', '50 50 50 50')