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

Question

我正在使用 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 对象？

Answer 1

解决方案既愚蠢又简单：

var svg = SVG('svgId');

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

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

Load and transform and embed an SVG file with svg.js