@svgedit/svgcanvas 7.2.6 → 7.4.1

package/core/selected-elem.js

@@ -9,6 +9,7 @@
 import { NS } from './namespaces.js'
 import * as hstry from './history.js'
 import * as pathModule from './path.js'
+import { warn, error } from '../common/logger.js'
 import {
   getStrokedBBoxDefaultVisible,
   setHref,
@@ -63,6 +64,7 @@ export const init = canvas => {
   svgCanvas.updateCanvas = updateCanvas // Updates the editor canvas width/height/position after a zoom has occurred.
   svgCanvas.cycleElement = cycleElement // Select the next/previous element within the current layer.
   svgCanvas.deleteSelectedElements = deleteSelectedElements // Removes all selected elements from the DOM and adds the change to the history
+  svgCanvas.flipSelectedElements = flipSelectedElements // Flips selected elements horizontally or vertically
 }
 
 /**
@@ -103,14 +105,17 @@ const moveToBottomSelectedElem = () => {
     let t = selected
     const oldParent = t.parentNode
     const oldNextSibling = t.nextSibling
-    let { firstChild } = t.parentNode
-    if (firstChild.tagName === 'title') {
-      firstChild = firstChild.nextSibling
+    let firstChild = t.parentNode.firstElementChild
+    if (firstChild?.tagName === 'title') {
+      firstChild = firstChild.nextElementSibling
     }
     // This can probably be removed, as the defs should not ever apppear
     // inside a layer group
-    if (firstChild.tagName === 'defs') {
-      firstChild = firstChild.nextSibling
+    if (firstChild?.tagName === 'defs') {
+      firstChild = firstChild.nextElementSibling
+    }
+    if (!firstChild) {
+      return
     }
     t = t.parentNode.insertBefore(t, firstChild)
     // If the element actually moved position, add the command and fire the changed
@@ -178,7 +183,7 @@ const moveUpDownSelected = dir => {
   // event handler.
   if (oldNextSibling !== t.nextSibling) {
     svgCanvas.addCommandToHistory(
-      new MoveElementCommand(t, oldNextSibling, oldParent, 'Move ' + dir)
+      new MoveElementCommand(t, oldNextSibling, oldParent, `Move ${dir}`)
     )
     svgCanvas.call('changed', [t])
   }
@@ -207,6 +212,9 @@ const moveSelectedElements = (dx, dy, undoable = true) => {
   const batchCmd = new BatchCommand('position')
   selectedElements.forEach((selected, i) => {
     if (selected) {
+      // Store the existing transform before modifying
+      const existingTransform = selected.getAttribute('transform') || ''
+
       const xform = svgCanvas.getSvgRoot().createSVGTransform()
       const tlist = getTransformList(selected)
 
@@ -226,6 +234,12 @@ const moveSelectedElements = (dx, dy, undoable = true) => {
       const cmd = recalculateDimensions(selected)
       if (cmd) {
         batchCmd.addSubCommand(cmd)
+      } else if ((selected.getAttribute('transform') || '') !== existingTransform) {
+        // For groups and other elements where recalculateDimensions returns null,
+        // record the transform change directly
+        batchCmd.addSubCommand(
+          new ChangeElementCommand(selected, { transform: existingTransform })
+        )
       }
 
       svgCanvas
@@ -264,9 +278,11 @@ const cloneSelectedElements = (x, y) => {
   const index = el => {
     if (!el) return -1
     let i = 0
+    let current = el
     do {
       i++
-    } while (el === el.previousElementSibling)
+      current = current.previousElementSibling
+    } while (current)
     return i
   }
 
@@ -621,13 +637,87 @@ const deleteSelectedElements = () => {
   svgCanvas.clearSelection()
 }
 
+/**
+ * Flips selected elements horizontally or vertically by transforming actual coordinates.
+ * @function module:selected-elem.SvgCanvas#flipSelectedElements
+ * @param {number} scaleX - Scale factor for X axis (-1 for horizontal flip, 1 for no flip)
+ * @param {number} scaleY - Scale factor for Y axis (1 for no flip, -1 for vertical flip)
+ * @fires module:selected-elem.SvgCanvas#event:changed
+ * @returns {void}
+ */
+const flipSelectedElements = (scaleX, scaleY) => {
+  const selectedElements = svgCanvas.getSelectedElements()
+  const batchCmd = new BatchCommand('Flip Elements')
+  const svgRoot = svgCanvas.getSvgRoot()
+
+  selectedElements.forEach(selected => {
+    if (!selected) return
+
+    const bbox = getStrokedBBoxDefaultVisible([selected])
+    if (!bbox) return
+
+    const cx = bbox.x + bbox.width / 2
+    const cy = bbox.y + bbox.height / 2
+    const existingTransform = selected.getAttribute('transform') || ''
+
+    const flipMatrix = svgRoot
+      .createSVGMatrix()
+      .translate(cx, cy)
+      .scaleNonUniform(scaleX, scaleY)
+      .translate(-cx, -cy)
+
+    const tlist = getTransformList(selected)
+    const combinedMatrix = matrixMultiply(
+      transformListToTransform(tlist).matrix,
+      flipMatrix
+    )
+
+    const flipTransform = svgRoot.createSVGTransform()
+    flipTransform.setMatrix(combinedMatrix)
+
+    tlist.clear()
+    tlist.appendItem(flipTransform)
+
+    const prevStartTransform = svgCanvas.getStartTransform
+      ? svgCanvas.getStartTransform()
+      : null
+    if (svgCanvas.setStartTransform) {
+      svgCanvas.setStartTransform(existingTransform)
+    }
+
+    const cmd = recalculateDimensions(selected)
+
+    if (svgCanvas.setStartTransform) {
+      svgCanvas.setStartTransform(prevStartTransform)
+    }
+
+    if (cmd) {
+      batchCmd.addSubCommand(cmd)
+    } else if ((selected.getAttribute('transform') || '') !== existingTransform) {
+      batchCmd.addSubCommand(
+        new ChangeElementCommand(selected, { transform: existingTransform })
+      )
+    }
+
+    svgCanvas
+      .gettingSelectorManager()
+      .requestSelector(selected)
+      .resize()
+  })
+
+  if (!batchCmd.isEmpty()) {
+    svgCanvas.addCommandToHistory(batchCmd)
+    svgCanvas.call('changed', selectedElements.filter(Boolean))
+  }
+}
+
 /**
  * Remembers the current selected elements on the clipboard.
  * @function module:selected-elem.SvgCanvas#copySelectedElements
  * @returns {void}
  */
 const copySelectedElements = () => {
-  const selectedElements = svgCanvas.getSelectedElements()
+  const selectedElements = svgCanvas.getSelectedElements().filter(Boolean)
   const data = JSON.stringify(
     selectedElements.map(x => svgCanvas.getJsonFromSvgElements(x))
   )
@@ -637,7 +727,7 @@ const copySelectedElements = () => {
 
   // Context menu might not exist (it is provided by editor.js).
   const canvMenu = document.getElementById('se-cmenu_canvas')
-  canvMenu.setAttribute('enablemenuitems', '#paste,#paste_in_place')
+  canvMenu?.setAttribute('enablemenuitems', '#paste,#paste_in_place')
 }
 
 /**
@@ -791,10 +881,10 @@ const pushGroupProperty = (g, undoable) => {
           // Change this in future for different filters
           const suffix =
             blurElem?.tagName === 'feGaussianBlur' ? 'blur' : 'filter'
-          gfilter.id = elem.id + '_' + suffix
+          gfilter.id = `${elem.id}_${suffix}`
           svgCanvas.changeSelectedAttribute(
             'filter',
-            'url(#' + gfilter.id + ')',
+            `url(#${gfilter.id})`,
             [elem]
           )
         }
@@ -901,20 +991,29 @@ const pushGroupProperty = (g, undoable) => {
         changes = {}
         changes.transform = oldxform || ''
 
+        // Simply prepend the group's transform to the child's transform list
+        // New transform = [group transform] [child transform]
+        // This preserves the correct application order
         const newxform = svgCanvas.getSvgRoot().createSVGTransform()
+        newxform.setMatrix(m)
 
-        // [ gm ] [ chm ] = [ chm ] [ gm' ]
-        // [ gm' ] = [ chmInv ] [ gm ] [ chm ]
-        const chm = transformListToTransform(chtlist).matrix
-        const chmInv = chm.inverse()
-        const gm = matrixMultiply(chmInv, m, chm)
-        newxform.setMatrix(gm)
-        chtlist.appendItem(newxform)
-      }
-      const cmd = recalculateDimensions(elem)
-      if (cmd) {
-        batchCmd.addSubCommand(cmd)
+        // Insert group's transform at the beginning of child's transform list
+        if (chtlist.numberOfItems) {
+          chtlist.insertItemBefore(newxform, 0)
+        } else {
+          chtlist.appendItem(newxform)
+        }
+
+        // Record the transform change for undo/redo
+        if (undoable) {
+          batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
+        }
       }
+      // NOTE: We intentionally do NOT call recalculateDimensions here because:
+      // 1. It reorders transforms (moves rotate before translate), changing the visual result
+      // 2. It recalculates rotation centers, causing elements to jump
+      // 3. The prepended group transform is already in the correct position
+      // Just leave the transforms as-is after prepending the group's transform
     }
   }
 
@@ -972,6 +1071,10 @@ const convertToGroup = elem => {
     svgCanvas.call('selected', [elem])
   } else if (dataStorage.has($elem, 'symbol')) {
     elem = dataStorage.get($elem, 'symbol')
+    if (!elem) {
+      warn('Unable to convert <use>: missing symbol reference', null, 'selected-elem')
+      return
+    }
 
     ts = $elem.getAttribute('transform') || ''
     const pos = {
@@ -990,14 +1093,15 @@ const convertToGroup = elem => {
     // Not ideal, but works
     ts += ' translate(' + (pos.x || 0) + ',' + (pos.y || 0) + ')'
 
-    const prev = $elem.previousElementSibling
+    const useParent = $elem.parentNode
+    const useNextSibling = $elem.nextSibling
 
     // Remove <use> element
     batchCmd.addSubCommand(
       new RemoveElementCommand(
         $elem,
-        $elem.nextElementSibling,
-        $elem.parentNode
+        useNextSibling,
+        useParent
       )
     )
     $elem.remove()
@@ -1049,7 +1153,9 @@ const convertToGroup = elem => {
     // now give the g itself a new id
     g.id = svgCanvas.getNextId()
 
-    prev.after(g)
+    if (useParent) {
+      useParent.insertBefore(g, useNextSibling)
+    }
 
     if (parent) {
       if (!hasMore) {
@@ -1077,7 +1183,7 @@ const convertToGroup = elem => {
       try {
         recalculateDimensions(n)
       } catch (e) {
-        console.error(e)
+        error('Error recalculating dimensions', e, 'selected-elem')
       }
     })
 
@@ -1098,7 +1204,7 @@ const convertToGroup = elem => {
 
     svgCanvas.addCommandToHistory(batchCmd)
   } else {
-    console.warn('Unexpected element to ungroup:', elem)
+    warn('Unexpected element to ungroup:', elem, 'selected-elem')
   }
 }
 
@@ -1122,7 +1228,16 @@ const ungroupSelectedElement = () => {
   }
   if (g.tagName === 'use') {
     // Somehow doesn't have data set, so retrieve
-    const symbol = getElement(getHref(g).substr(1))
+    const href = getHref(g)
+    if (!href || !href.startsWith('#')) {
+      warn('Unexpected <use> without local reference:', g, 'selected-elem')
+      return
+    }
+    const symbol = getElement(href.slice(1))
+    if (!symbol) {
+      warn('Unexpected <use> without resolved reference:', g, 'selected-elem')
+      return
+    }
     dataStorage.put(g, 'symbol', symbol)
     dataStorage.put(g, 'ref', symbol)
     convertToGroup(g)
@@ -1206,7 +1321,7 @@ const updateCanvas = (w, h) => {
     height: svgCanvas.contentH * zoom,
     x,
     y,
-    viewBox: '0 0 ' + svgCanvas.contentW + ' ' + svgCanvas.contentH
+    viewBox: `0 0 ${svgCanvas.contentW} ${svgCanvas.contentH}`
   })
 
   assignAttributes(bg, {
@@ -1226,7 +1341,7 @@ const updateCanvas = (w, h) => {
 
   svgCanvas.selectorManager.selectorParentGroup.setAttribute(
     'transform',
-    'translate(' + x + ',' + y + ')'
+    `translate(${x},${y})`
   )
 
   /**

package/core/selection.js

@@ -409,8 +409,11 @@ const setRotationAngle = (val, preventUndo) => {
       cy,
       transformListToTransform(tlist).matrix
     )
+    // Safety check: if center coordinates are invalid (NaN), fall back to untransformed bbox center
+    const centerX = Number.isFinite(center.x) ? center.x : cx
+    const centerY = Number.isFinite(center.y) ? center.y : cy
     const Rnc = svgCanvas.getSvgRoot().createSVGTransform()
-    Rnc.setRotate(val, center.x, center.y)
+    Rnc.setRotate(val, centerX, centerY)
     if (tlist.numberOfItems) {
       tlist.insertItemBefore(Rnc, 0)
     } else {
@@ -424,13 +427,20 @@ const setRotationAngle = (val, preventUndo) => {
     // we need to undo it, then redo it so it can be undo-able! :)
     // TODO: figure out how to make changes to transform list undo-able cross-browser?
     let newTransform = elem.getAttribute('transform')
+
     // new transform is something like: 'rotate(5 1.39625e-8 -11)'
     // we round the x so it becomes 'rotate(5 0 -11)'
-    if (newTransform) {
-      const newTransformArray = newTransform.split(/[ ,]+/)
-      const round = (num) => Math.round(Number(num) + Number.EPSILON)
-      const x = round(newTransformArray[1])
-      newTransform = `${newTransformArray[0]} ${x} ${newTransformArray[2]}`
+    // Only do this manipulation if the first transform is actually a rotation
+    if (newTransform && newTransform.startsWith('rotate(')) {
+      const match = newTransform.match(/^rotate\(([\d.\-e]+)\s+([\d.\-e]+)\s+([\d.\-e]+)\)(.*)/)
+      if (match) {
+        const angle = Number.parseFloat(match[1])
+        const round = (num) => Math.round(Number(num) + Number.EPSILON)
+        const x = round(match[2])
+        const y = round(match[3])
+        const restOfTransform = match[4] || '' // Preserve any transforms after the rotate
+        newTransform = `rotate(${angle} ${x} ${y})${restOfTransform}`
+      }
     }
 
     if (oldTransform) {

package/core/svg-exec.js

@@ -8,10 +8,12 @@
 import { jsPDF as JsPDF } from 'jspdf'
 import 'svg2pdf.js'
 import * as history from './history.js'
+import { error } from '../common/logger.js'
 import {
   text2xml,
   cleanupElement,
   findDefs,
+  setHref,
   getHref,
   preventClickDefault,
   toXml,
@@ -130,7 +132,7 @@ const svgToString = (elem, indent) => {
   const nsMap = svgCanvas.getNsMap()
   const out = []
   const unit = curConfig.baseUnit
-  const unitRe = new RegExp('^-?[\\d\\.]+' + unit + '$')
+  const unitRe = new RegExp(`^-?[\\d\\.]+${unit}$`)
 
   if (elem) {
     cleanupElement(elem)
@@ -163,7 +165,10 @@ const svgToString = (elem, indent) => {
       // }
       if (curConfig.dynamicOutput) {
         vb = elem.getAttribute('viewBox')
-        out.push(' viewBox="' + vb + '" xmlns="' + NS.SVG + '"')
+        if (!vb) {
+          vb = [0, 0, res.w, res.h].join(' ')
+        }
+        out.push(` viewBox="${vb}" xmlns="${NS.SVG}"`)
       } else {
         if (unit !== 'px') {
           res.w = convertUnit(res.w, unit) + unit
@@ -192,14 +197,14 @@ const svgToString = (elem, indent) => {
           nsMap[uri] !== 'xml'
         ) {
           nsuris[uri] = true
-          out.push(' xmlns:' + nsMap[uri] + '="' + uri + '"')
+          out.push(` xmlns:${nsMap[uri]}="${uri}"`)
         }
         if (el.attributes.length > 0) {
           for (const [, attr] of Object.entries(el.attributes)) {
             const u = attr.namespaceURI
             if (u && !nsuris[u] && nsMap[u] !== 'xmlns' && nsMap[u] !== 'xml') {
               nsuris[u] = true
-              out.push(' xmlns:' + nsMap[u] + '="' + u + '"')
+              out.push(` xmlns:${nsMap[u]}="${u}"`)
             }
           }
         }
@@ -443,7 +448,8 @@ const setSvgString = (xmlString, preventUndo) => {
             // const url = decodeURIComponent(m.groups.url);
             const iimg = new Image()
             iimg.addEventListener('load', () => {
-              image.setAttributeNS(NS.XLINK, 'xlink:href', url)
+              // Set the href attribute to the data URL
+              setHref(image, val)
             })
             iimg.src = url
           }
@@ -467,7 +473,7 @@ const setSvgString = (xmlString, preventUndo) => {
 
     Object.entries(ids).forEach(([key, value]) => {
       if (value > 1) {
-        const nodes = content.querySelectorAll('[id="' + key + '"]')
+        const nodes = content.querySelectorAll(`[id="${key}"]`)
         for (let i = 1; i < nodes.length; i++) {
           nodes[i].setAttribute('id', svgCanvas.getNextId())
         }
@@ -523,14 +529,20 @@ const setSvgString = (xmlString, preventUndo) => {
     if (content.getAttribute('viewBox')) {
       const viBox = content.getAttribute('viewBox')
       const vb = viBox.split(/[ ,]+/)
-      attrs.width = vb[2]
-      attrs.height = vb[3]
+      const vbWidth = Number(vb[2])
+      const vbHeight = Number(vb[3])
+      if (Number.isFinite(vbWidth)) {
+        attrs.width = vbWidth
+      }
+      if (Number.isFinite(vbHeight)) {
+        attrs.height = vbHeight
+      }
       // handle content that doesn't have a viewBox
     } else {
       ;['width', 'height'].forEach(dim => {
         // Set to 100 if not given
         const val = content.getAttribute(dim) || '100%'
-        if (String(val).substr(-1) === '%') {
+        if (String(val).slice(-1) === '%') {
           // Use user units if percentage given
           percs = true
         } else {
@@ -556,16 +568,25 @@ const setSvgString = (xmlString, preventUndo) => {
     // Percentage width/height, so let's base it on visible elements
     if (percs) {
       const bb = getStrokedBBoxDefaultVisible()
-      attrs.width = bb.width + bb.x
-      attrs.height = bb.height + bb.y
+      if (bb && typeof bb === 'object') {
+        attrs.width = bb.width + bb.x
+        attrs.height = bb.height + bb.y
+      } else {
+        if (attrs.width === null || attrs.width === undefined) {
+          attrs.width = 100
+        }
+        if (attrs.height === null || attrs.height === undefined) {
+          attrs.height = 100
+        }
+      }
     }
 
     // Just in case negative numbers are given or
     // result from the percs calculation
-    if (attrs.width <= 0) {
+    if (!Number.isFinite(attrs.width) || attrs.width <= 0) {
       attrs.width = 100
     }
-    if (attrs.height <= 0) {
+    if (!Number.isFinite(attrs.height) || attrs.height <= 0) {
       attrs.height = 100
     }
 
@@ -594,7 +615,7 @@ const setSvgString = (xmlString, preventUndo) => {
     if (!preventUndo) svgCanvas.addCommandToHistory(batchCmd)
     svgCanvas.call('sourcechanged', [svgCanvas.getSvgContent()])
   } catch (e) {
-    console.error(e)
+    error('Error setting SVG string', e, 'svg-exec')
     return false
   }
 
@@ -664,16 +685,26 @@ const importSvgString = (xmlString, preserveDimension) => {
 
       // TODO: properly handle preserveAspectRatio
       const // canvasw = +svgContent.getAttribute('width'),
-        canvash = Number(svgCanvas.getSvgContent().getAttribute('height'))
+        rawCanvash = Number(svgCanvas.getSvgContent().getAttribute('height'))
+      const canvash =
+        Number.isFinite(rawCanvash) && rawCanvash > 0
+          ? rawCanvash
+          : (Number(svgCanvas.getCurConfig().dimensions?.[1]) || 100)
       // imported content should be 1/3 of the canvas on its largest dimension
 
+      const vbWidth = vb[2]
+      const vbHeight = vb[3]
+      const importW = Number.isFinite(vbWidth) && vbWidth > 0 ? vbWidth : (innerw > 0 ? innerw : 100)
+      const importH = Number.isFinite(vbHeight) && vbHeight > 0 ? vbHeight : (innerh > 0 ? innerh : 100)
+      const safeImportW = Number.isFinite(importW) && importW > 0 ? importW : 100
+      const safeImportH = Number.isFinite(importH) && importH > 0 ? importH : 100
       ts =
-        innerh > innerw
-          ? 'scale(' + canvash / 3 / vb[3] + ')'
-          : 'scale(' + canvash / 3 / vb[2] + ')'
+        safeImportH > safeImportW
+          ? 'scale(' + canvash / 3 / safeImportH + ')'
+          : 'scale(' + canvash / 3 / safeImportW + ')'
 
       // Hack to make recalculateDimensions understand how to scale
-      ts = 'translate(0) ' + ts + ' translate(0)'
+      ts = `translate(0) ${ts} translate(0)`
 
       symbol = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'symbol')
       const defs = findDefs()
@@ -736,7 +767,7 @@ const importSvgString = (xmlString, preserveDimension) => {
     svgCanvas.addCommandToHistory(batchCmd)
     svgCanvas.call('changed', [svgCanvas.getSvgContent()])
   } catch (e) {
-    console.error(e)
+    error('Error importing SVG string', e, 'svg-exec')
     return null
   }
 
@@ -858,13 +889,13 @@ const convertImagesToBase64 = async svgElement => {
         const reader = new FileReader()
         return new Promise(resolve => {
           reader.onload = () => {
-            img.setAttribute('xlink:href', reader.result)
+            setHref(img, reader.result)
             resolve()
           }
           reader.readAsDataURL(blob)
         })
-      } catch (error) {
-        console.error('Failed to fetch image:', error)
+      } catch (err) {
+        error('Failed to fetch image', err, 'svg-exec')
       }
     }
   })
@@ -903,10 +934,14 @@ const rasterExport = (
 
         const canvas = document.createElement('canvas')
         const ctx = canvas.getContext('2d')
+        if (!ctx) {
+          reject(new Error('Canvas 2D context not available'))
+          return
+        }
 
-        const width = svgElement.clientWidth || svgElement.getAttribute('width')
-        const height =
-          svgElement.clientHeight || svgElement.getAttribute('height')
+        const res = svgCanvas.getResolution()
+        const width = res.w
+        const height = res.h
         canvas.width = width
         canvas.height = height
 
@@ -1011,7 +1046,7 @@ const exportPDF = (
         }
 
         img.onerror = err => {
-          console.error('Failed to load SVG into image element:', err)
+          error('Failed to load SVG into image element', err, 'svg-exec')
           reject(err)
         }
 
@@ -1110,7 +1145,7 @@ const uniquifyElemsMethod = g => {
       let j = attrs.length
       while (j--) {
         const attr = attrs[j]
-        attr.ownerElement.setAttribute(attr.name, 'url(#' + newid + ')')
+        attr.ownerElement.setAttribute(attr.name, `url(#${newid})`)
       }
 
       // remap all href attributes
@@ -1140,7 +1175,11 @@ const setUseDataMethod = parent => {
 
   Array.prototype.forEach.call(elems, (el, _) => {
     const dataStorage = svgCanvas.getDataStorage()
-    const id = svgCanvas.getHref(el).substr(1)
+    const href = svgCanvas.getHref(el)
+    if (!href || !href.startsWith('#')) {
+      return
+    }
+    const id = href.substr(1)
     const refElem = svgCanvas.getElement(id)
     if (!refElem) {
       return
@@ -1299,6 +1338,41 @@ const convertGradientsMethod = elem => {
         grad.setAttribute('x2', (gCoords.x2 - bb.x) / bb.width)
         grad.setAttribute('y2', (gCoords.y2 - bb.y) / bb.height)
         grad.removeAttribute('gradientUnits')
+      } else if (grad.tagName === 'radialGradient') {
+        const getNum = (value, fallback) => {
+          const num = Number(value)
+          return Number.isFinite(num) ? num : fallback
+        }
+        let cx = getNum(grad.getAttribute('cx'), 0.5)
+        let cy = getNum(grad.getAttribute('cy'), 0.5)
+        let r = getNum(grad.getAttribute('r'), 0.5)
+        let fx = getNum(grad.getAttribute('fx'), cx)
+        let fy = getNum(grad.getAttribute('fy'), cy)
+
+        // If has transform, convert
+        const tlist = getTransformList(grad)
+        if (tlist?.numberOfItems > 0) {
+          const m = transformListToTransform(tlist).matrix
+          const cpt = transformPoint(cx, cy, m)
+          const fpt = transformPoint(fx, fy, m)
+          const rpt = transformPoint(cx + r, cy, m)
+          cx = cpt.x
+          cy = cpt.y
+          fx = fpt.x
+          fy = fpt.y
+          r = Math.hypot(rpt.x - cpt.x, rpt.y - cpt.y)
+          grad.removeAttribute('gradientTransform')
+        }
+
+        if (!bb.width || !bb.height) {
+          return
+        }
+        grad.setAttribute('cx', (cx - bb.x) / bb.width)
+        grad.setAttribute('cy', (cy - bb.y) / bb.height)
+        grad.setAttribute('fx', (fx - bb.x) / bb.width)
+        grad.setAttribute('fy', (fy - bb.y) / bb.height)
+        grad.setAttribute('r', r / Math.max(bb.width, bb.height))
+        grad.removeAttribute('gradientUnits')
       }
     }
   })

package/core/svgroot.js

@@ -14,7 +14,7 @@ import { text2xml } from './utilities.js'
 * @param {ArgumentsArray} dimensions - dimensions of width and height
 * @returns {svgRootElement}
 */
-export const svgRootElement = function (svgdoc, dimensions) {
+export const svgRootElement = (svgdoc, dimensions) => {
   return svgdoc.importNode(
     text2xml(
       `<svg id="svgroot" xmlns="${NS.SVG}" xlinkns="${NS.XLINK}" width="${dimensions[0]}"