Question

这是我第一次使用SVG文件时，我无法谷歌回答这个问题。我有一个从Adobe Illustrator创建的.svg插图。我想将此图像加载到网页中，并能够使用javascript操作它。有没有一个允许我这样做的JavaScript库？该库必须适用于当前的移动设备。幻想代码说明了我正在尝试做的事情：

<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)

我知道你可以使用javascript操作这样的DOM元素，但svg图像是否会被缩放而不会失真？此外，我认为SVG还有javascript通常不支持的其他奇特转换。理想情况下，我也想使用它们。

Answer 1

如果将SVG图形与<img>结合使用，您将能够完成与任何其他图像格式完全相同的内容 - 不多也不少。（唯一的好处可能是你可以改变宽度/高度而不会失去清脆度。）

如果您想要转换或以其他方式更改SVG本身的任何元素，最好将SVG内联。也许this answer有帮助。如果您的SVG是由Illustrator生成的，那么清理SVG可能会大大减小文件大小并使其更适合JavaScript操作。

如果您坚持使用<img>，仍然可以使用CSS3 transforms（请参阅the specs进行详尽说明）。