我正在尝试使用 SVG.js 创建 SVG,但它似乎在我的文档中创建了多个 SVG 元素,而不是一个。我已经将 SVG.js 主页 ( http://www.svgjs.com/) 中的代码复制粘贴到一个 HTML 文档中,但它做同样的事情。谁能帮帮我?
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<html>
<head>
<title>Drawing</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="svg.min.js"></script>
</head>
<body>
<div id="drawing">
</div>
<script>
var draw = SVG('drawing')
// create image
var image = draw.image('images/shade.jpg')
image.size(600, 600).y(-150)
// create text
var text = draw.text('SVG.JS').move(300, 0)
text.font({
family: 'Source Sans Pro'
, size: 180
, anchor: 'middle'
, leading: 1
})
// clip image with text
image.clipWith(text)
</script>
</body>
</html>
最佳答案
原因很简单。 svg.js 总共创建了 2 个文档。一个用于显示它,另一个被隐藏,用作不同功能的解析器。 这样 lib 就可以,例如计算数组的边界框。
请注意,此解析器仅创建一次。因此,即使您构建了多个 svg 文档,也只会有一个额外的文档用于解析
此处记录:http://svgjs.dev/faq/#two-svg-s-are-generated-when-i-initialize-svg-js-is-that-a-bug
关于svg.js 创建双 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23879328/