如何用jQuery克隆SVG并在独立DIV中裁剪指定区域？

没问题！要在独立容器里显示SVG的指定区域，核心就是正确配置viewBox属性，结合宽高设置实现缩放。下面一步步给你讲清楚：

理解viewBox的作用 #

SVG的viewBox属性接受四个参数：viewBox="min-x min-y width height"，分别代表：

• min-x：要显示区域的左上角x坐标
• min-y：要显示区域的左上角y坐标
• width：要显示区域的宽度
• height：要显示区域的高度

它的作用是告诉SVG：“只把这个矩形区域里的内容渲染出来，然后适配到SVG的width/height设置的尺寸里”。

针对你的需求修改代码 #

你要截取的是从(50,50)到(100,100)的区域（正好是绿色圆形所在的范围），所以对应的viewBox应该是50 50 50 50。修改你的JavaScript代码如下：

svgclone = $('#main').clone();
// 关键：设置viewBox来指定要显示的区域
svgclone.attr('viewBox', '50 50 50 50');
// 设置显示的宽高，控制缩放比例（这里设为100px，相当于把50x50的区域放大到100x100）
svgclone.width(100);
svgclone.height(100);
$('#portion').html(svgclone);

效果说明 #

• 原SVG的viewBox="0 0 100 100"对应整个画布，改成50 50 50 50后，就只会显示画布右下角50x50的区域（也就是绿色圆形）。
• 通过调整width和height的值，可以自由控制缩放比例：比如设为50就是1:1显示，设为200就是把目标区域放大4倍显示。

完整示例代码 #

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type='text/javascript'>
svgclone = $('#main').clone();
svgclone.attr('viewBox', '50 50 50 50');
svgclone.width(100);
svgclone.height(100);
$('#portion').html(svgclone);
</script>

内容的提问来源于stack exchange，提问作者Stefano Radaelli