Question

我试图使用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>

Answer 1

原因很简单。 svg.js创建了2个文件。一个用于显示它，另一个用于隐藏，并用作不同功能的解析器。这样lib可以例如计算数组的边界框。

请注意，此解析器仅创建一次。因此，即使您构建了多个svg文档，也只会有一个用于解析的附加文档

此处记录了这些内容：http://svgjs.com/faq/#two-svg-s-are-generated-when-i-initialize-svg-js-is-that-a-bug

svg.js创建双SVG

1 个答案: