jquery - jQuery：在单独的 DIV 上克隆和剪切部分 SVG 图像

Question

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

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

<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 type='text/javascript'>
svgclone = $('#main').clone();

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

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

标签： jquerysvgclipping

Answer 1

jQuery.attr()将属性名称转换为小写，viewbox从viewBox. 改用泛型.setAttribute()：

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