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

Question

我有一个 SVG 图像，它定义了一个红色方块、一个橙色圆圈和一个绿色圆圈：

目标是在单独的 div 上显示图像的 portion/clip（例如，从像素 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>

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

Answer 1

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

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

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

jQuery: clone and cut portion of SVG image on a separate DIV

jquery

svg

clipping