使用 svg.js 加载、转换和嵌入 SVG 文件答案

【问题标题】：Load and transform and embed an SVG file with svg.js使用 svg.js 加载、转换和嵌入 SVG 文件
【发布时间】：2015-08-31 20:00:52
【问题描述】：

我正在使用svg.js 库来加载 svg 文件、添加其点（图像）并为这些点设置动画。我在 PHP 中加载 svg 文件并生成代码以将其嵌入到 html 中。

这是我的 html 代码的外观：

<div class="svg-element">
    <svg id="svgId" ...>
        <!-- SVG code -->
    </svg>
</div>

这就是我的 javascript 代码的样子：

var svg = SVG.get('svgId');
svg.size('100%', '100%');

var point = svg.image(point_url);
point.attr('id', 'pointId');
point.move(100, 100);

该代码运行良好，但是当我使用scale() 函数对点进行缩放效果时，问题就来了。

point.scale(0.5);

或transform 函数：

point.transform({scaleX : '0.5', scaleY : '0.5'});

JavaScript 控制台中显示TypeError: SVG.parser is undefined 错误。

我怎样才能避免这个问题并对图像使用变换方法？问题可能是我使用了.get() 函数，如何用svg 文件创建SVG 对象？

【问题讨论】：

【解决方案1】：

解决方法又傻又简单：

var svg = SVG('svgId');

而不是使用.get() 函数。

您必须使用带有 SVG id 的 SVG() 构造函数，而不是 .get() 函数，我对此感到困惑，因为 this answer 说您可以使用 .get() 来检索 SVG。

【讨论】：