前段时间，我尝试了使用 svg.js 来创建 svg dom 文档时，并没有成功。经过反复多次的尝试，并网络检索了一些信息，初步确认为官方文档未及时更新，导致了编码错误。

使用 svg.js 遇到的问题

举个例子，dom 文档 .html 的结构如下：

<!DOCTYPE html>
<html>
<head>
<title>Creating SVG with SVG.js</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://cdn.bootcss.com/svg.js/3.0.11/svg.min.js"></script>
</head>

<body>
<div id="drawing"></div>
<script>
  // write down your javascript here..
</script>
</body>
</html>

官方文档（见 https://svgjs.com/docs/3.0/getting-started/ ）对于 JavaScript 脚本环节的部分 <script>...</script> 是这样写的：

var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

上述脚本在 jsfiddle.net 网站中测试是无异常的，详见 https://jsfiddle.net/wout/wmtt8rkz/7/?utm_source=website&utm_medium=embed&utm_campaign=wmtt8rkz 。然而，无论我是在 IE 7.0 至 11.0，还是在 Chrome 58 内核的浏览器中，我的本地测试从未成功。因此，整整 2 天里，我都未能从试验的阴影中恢复过来，反反复复进行了无数次试验，均无果而终。

使用 svg.js 书写脚本和 DOM 的方法

在无数次的一边尝试、一边网络搜索的过程中，我发现了以下可行的方法：

1. 方法 1

DOM 文档： <div id="drawing"></div>

脚本 1： var draw = SVG().addTo('#drawing').size(1024,200);

或采取以下脚本：

脚本 2： var draw = SVG().addTo('#drawing').size('100%', '100%');

2. 方法 2

DOM 文档： <div class="drawing"></div>

脚本 1： var draw = SVG().addTo('.drawing').size(1024,200);

或采取以下脚本：

脚本 2： var draw = SVG().addTo('.drawing').size('100%', '100%');

3. 方法 3

DOM 文档： <svg id="drawing"></svg>

脚本 1： var draw = SVG('#drawing').size(1024, 200);

或采取以下脚本：

脚本 2： var draw = SVG('#drawing').size('100%', '100%');

收工完事！




最后更新： 2019/02/10 21:51:52

作者： David Faraday

主用链接： https://faradays-studio.gitee.io/201902090951/

备用链接： https://faradays-studio.github.io/201902090951/

许可协议： CC BY-NC-SA 4.0.