support destSVG in toSVG params

ip413 · Oct 26, 2020 · c19118f · c19118f
1 parent 58cff8f
commit c19118f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/examples/destsvg-example.html b/examples/destsvg-example.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Trianglify Basic Example</title>
+    <style>
+    html, body {
+      margin: 0 0;
+      padding: 0 0;
+      text-align: center;
+      font-size: 0;
+      background: #000;
+    }
+
+    svg, canvas {
+      padding-bottom: 30px;
+      text-align: center;
+    }
+    </style>
+  </head>
+  <body>
+  <svg id="svg-element" />
+  <!-- This is the standalone build of Trianglify. It's easy to drop in to a
+  project without any need for bundlers or dependency management, but in most
+  modern web projects you will probably want to use the NPM module instead -->
+  <script src="../dist/trianglify.bundle.debug.js"></script>
+  <script>
+    const pattern = trianglify({
+      cellSize: 50,
+      width: window.innerWidth * 0.8,
+      height: (window.innerHeight - 4 * 30) / 4
+    })
+
+    const existingSVGElement = document.getElementById('svg-element')
+
+    // Render to SVG
+    pattern.toSVG(existingSVGElement)
+  </script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "trianglify",
-  "version": "4.0.0",
+  "version": "4.1.0-beta",
   "description": "Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.",
   "main": "dist/trianglify.js",
   "scripts": {
@@ -38,7 +38,9 @@
     ]
   },
   "jest": {
-    "setupFiles": ["jest-canvas-mock"]
+    "setupFiles": [
+      "jest-canvas-mock"
+    ]
   },
   "author": "Quinn Rohlf <qr@qrohlf.com>",
   "license": "GPL-3.0",

diff --git a/src/pattern.js b/src/pattern.js
@@ -4,8 +4,8 @@ const isBrowser = (typeof window !== 'undefined' && typeof document !== 'undefin
 const doc = isBrowser && document
 
 // utility for building up SVG node trees with the DOM API
-const sDOM = (tagName, attrs = {}, children) => {
-  const elem = doc.createElementNS('http://www.w3.org/2000/svg', tagName)
+const sDOM = (tagName, attrs = {}, children, existingRoot) => {
+  const elem = existingRoot || doc.createElementNS('http://www.w3.org/2000/svg', tagName)
   Object.keys(attrs).forEach(
     k => attrs[k] !== undefined && elem.setAttribute(k, attrs[k])
   )
@@ -74,7 +74,8 @@ export default class Pattern {
         width,
         height
       },
-      paths
+      paths,
+      destSVG
     )
 
     return svg