使用 svg.js 调整嵌套和导入的 svg答案

【问题标题】：resize nested and imported svg with svg.js使用 svg.js 调整嵌套和导入的 svg
【发布时间】：2017-04-30 09:24:34
【问题描述】：

这是我正在尝试做的事情的一支笔： http://codepen.io/amcc/pen/RVVRPX/ （下面也有简化代码）

我正在导入原始 svg，然后将其嵌套 - 因为这是允许拖动它所必需的。我希望能够重新缩放 svg，最好的方法是什么？

第 12 行显示我尝试使用 size()，但效果不大

var rawsvg1 = '<g><path d="M265.8,171.5V49H297v122.5H265.8z"/></g>';
var draw = SVG('drawing').size('100%', '100%');
var groupContainer = draw.nested();

var group1 = groupContainer.nested();
group1.svg(rawsvg1);
//change group1 attributes
group1.size(50, 50);

【问题讨论】：

标签： svg svg.js

【解决方案1】：

然后嵌套它 - 因为这是允许它被拖动所必需的。

你为什么这么认为？

不需要您创建的所有嵌套<svg> 元素。群组 (<g>) 也可以。

您可以使用转换功能调整“导入”内容的大小。

var draw = SVG('drawing').size('100%', '100%');

var group1 = draw.group();
group1.svg(rawsvg1);
//change group1 attributes
group1.attr('fill', '#fff');
group1.translate(200,100).scale(0.5,0.5);
//make group1 draggable
group1.draggable();
group1.draggable().on('dragmove', function(e){ })

Updated codepen

【讨论】：

谢谢，这正是我想要的。使用嵌套的原因是试图让“大小”功能起作用，并且在有关组的文档中的某个地方说它无法调整大小。 “规模”正是我应该做的，干杯
请注意，将导入的代码放在嵌套元素中可以使用 viewbox 属性。使用 viewbox，您可以正常缩放和翻译内容。