svg.js 创建双 SVG

标签 svg.js

我正在尝试使用 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/

相关文章:

javascript - 找到 svg 形状的中心

javascript - 在两点之间创建 svg 弧

node.js - 有没有办法让 svg.js 与 node.js 一起工作

svg.js - 我如何在 svg.js 3.x 版本中使用时间线

javascript - svg.js:水平偏移换行符 tspans 以创建交错外观

javascript - SVG.js:无法对矩形宽度或高度进行动画处理

javascript - SVG.js 困难的缩放和重新定位

javascript - 如何从 Polygon 动态更新 SVG viewBox 值

javascript - 如何将 SVG 图像放置在 TextPath 上文本的开头

javascript - svg.js 代码无法在 JSFiddle.com 或我的笔记本电脑上运行