使用 javascript 操作 .svg 文件答案

【问题标题】：manipulate .svg file using javascript使用 javascript 操作 .svg 文件
【发布时间】：2014-03-10 01:55:03
【问题描述】：

这是我第一次使用 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 通常不支持的其他花哨的转换。理想情况下，我也想使用这些。

【问题讨论】：

SVG 中的转换是开始将 SVG 引入其 DOM 的一个极具挑战性的切入点……是的，完全支持转换，没有失真。
“是否有一个 javascript 库可以让我这样做？” - raphaeljs.com
@Phil Rapahel 不适合处理现有的 SVG 图形，您必须使用 Raphael 生成图形。我宁愿建议Snap.svg，或Vanilla JS。
@ThomasW 啊，公平点。

标签： javascript svg

【解决方案1】：

如果您将 SVG 图形与 <img> 合并，您将能够执行与任何其他图像格式完全相同的操作 - 不多也不少。（唯一的好处可能是您可以更改宽度/高度而不会失去清晰度。）

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

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

【讨论】：

我不知道你可以像这样将 svg 粘贴到 html 中。谢谢。我做了一个小提琴尝试用 svg.js 移动我的 svg：jsfiddle.net/b58M5 但由于某种原因它不起作用。说“意外令牌非法”。有什么想法吗？
您到底想达到什么目的？你想移动整个图像吗？您可以使用<img> 元素而不是内联SVG，将其设为position:absolute 并使用left 和top CSS 属性定位它。不需要特殊的 SVG 东西。你想让这个动作变成动画吗？
我正在尝试制作动画游戏。小提琴只是一个玩具示例，用于查看 svg 库是否可以在移动设备上运行。我将收到一位输出 svg 的艺术家的插图，我将自己制作动画和填充组件。
snap.svg 做我想做的事：stackoverflow.com/questions/21404246/…。感谢您的建议。
非常好！无论如何，我对 Snap.svg 有更多的同情。它的方法名称更接近于标准 SVG DOM API 以及标准事件名称等，对我个人来说，这更透明，因为它告诉我更多关于库在引擎盖下实际使用 SVG 所做的事情。和老拉斐尔的继任者一样，你真的不会出错。为了学习如何操作现有的 SVG，我建议查看一些示例，例如 Snap crocodile。