@svgedit/svgcanvas 7.2.4 → 7.2.7

package/CHANGES.md

@@ -1,5 +1,14 @@
 # svgcanvas CHANGES
 
+
+## 7.2.7
+- Prefer href to xlink href (#1059)
+- Fix group rotation (#1058)
+- Fixed a bug where a rotated text or image did not translate correctly. (#1055) 
+
+## 7.2.5
+- update dependencies
+
 ## 7.2.4
 - bug fixes 
 - update dependencies

package/core/event.js

@@ -662,9 +662,18 @@ const mouseUpEvent = (evt) => {
         const elem = selectedElements[0]
         if (elem) {
           elem.removeAttribute('style')
-          walkTree(elem, (el) => {
-            el.removeAttribute('style')
-          })
+
+          // we don't remove the style elements for contents of foreignObjects
+          // because that is a valid way to style them
+          if (elem.localName === 'foreignObject') {
+            walkTree(elem, (el) => {
+              el.style.removeProperty('pointer-events')
+            })
+          } else {
+            walkTree(elem, (el) => {
+              el.removeAttribute('style')
+            })
+          }
         }
       }
       return

package/core/history.js

@@ -425,7 +425,7 @@ export class BatchCommand extends Command {
   */
   unapply (handler) {
     super.unapply(handler, () => {
-      this.stack.reverse().forEach((stackItem) => {
+      [...this.stack].reverse().forEach((stackItem) => {
         console.assert(stackItem, 'stack item should not be null')
         stackItem && stackItem.unapply(handler)
       })

package/core/paint.js

@@ -4,7 +4,7 @@
 export default class Paint {
   /**
    * @param {module:jGraduate.jGraduatePaintOptions} [opt]
-  */
+   */
   constructor (opt) {
     const options = opt || {}
     this.alpha = isNaN(options.alpha) ? 100 : options.alpha
@@ -51,33 +51,39 @@ export default class Paint {
           this.radialGradient = options.copy.radialGradient.cloneNode(true)
           break
       }
-    // create linear gradient paint
+      // create linear gradient paint
     } else if (options.linearGradient) {
       this.type = 'linearGradient'
       this.solidColor = null
       this.radialGradient = null
-      if (options.linearGradient.hasAttribute('xlink:href')) {
-        const xhref = document.getElementById(options.linearGradient.getAttribute('xlink:href').substr(1))
+      const hrefAttr =
+        options.linearGradient.getAttribute('href') ||
+        options.linearGradient.getAttribute('xlink:href')
+      if (hrefAttr) {
+        const xhref = document.getElementById(hrefAttr.replace(/^#/, ''))
         this.linearGradient = xhref.cloneNode(true)
       } else {
         this.linearGradient = options.linearGradient.cloneNode(true)
       }
-    // create linear gradient paint
+      // create linear gradient paint
     } else if (options.radialGradient) {
       this.type = 'radialGradient'
       this.solidColor = null
       this.linearGradient = null
-      if (options.radialGradient.hasAttribute('xlink:href')) {
-        const xhref = document.getElementById(options.radialGradient.getAttribute('xlink:href').substr(1))
+      const hrefAttr =
+        options.radialGradient.getAttribute('href') ||
+        options.radialGradient.getAttribute('xlink:href')
+      if (hrefAttr) {
+        const xhref = document.getElementById(hrefAttr.replace(/^#/, ''))
         this.radialGradient = xhref.cloneNode(true)
       } else {
         this.radialGradient = options.radialGradient.cloneNode(true)
       }
-    // create solid color paint
+      // create solid color paint
     } else if (options.solidColor) {
       this.type = 'solidColor'
       this.solidColor = options.solidColor
-    // create empty paint
+      // create empty paint
     } else {
       this.type = 'none'
       this.solidColor = null

package/core/recalculate.js

@@ -236,16 +236,35 @@ export const recalculateDimensions = selected => {
     // Handle rotation transformations
     const angle = getRotationAngle(selected)
     if (angle) {
-      // Include x and y in the rotation center calculation
-      oldcenter = {
-        x: box.x + box.width / 2 + x,
-        y: box.y + box.height / 2 + y
+      if (selected.localName === 'image') {
+        // Use the center of the image as the rotation center
+        const xAttr = convertToNum('x', selected.getAttribute('x') || '0')
+        const yAttr = convertToNum('y', selected.getAttribute('y') || '0')
+        const width = convertToNum('width', selected.getAttribute('width') || '0')
+        const height = convertToNum('height', selected.getAttribute('height') || '0')
+        const cx = xAttr + width / 2
+        const cy = yAttr + height / 2
+        oldcenter = { x: cx, y: cy }
+        const transform = transformListToTransform(tlist).matrix
+        newcenter = transformPoint(cx, cy, transform)
+      } else if (selected.localName === 'text') {
+        // Use the center of the bounding box as the rotation center for text
+        const cx = box.x + box.width / 2
+        const cy = box.y + box.height / 2
+        oldcenter = { x: cx, y: cy }
+        newcenter = transformPoint(cx, cy, transformListToTransform(tlist).matrix)
+      } else {
+        // Include x and y in the rotation center calculation for other elements
+        oldcenter = {
+          x: box.x + box.width / 2 + x,
+          y: box.y + box.height / 2 + y
+        }
+        newcenter = transformPoint(
+          box.x + box.width / 2 + x,
+          box.y + box.height / 2 + y,
+          transformListToTransform(tlist).matrix
+        )
       }
-      newcenter = transformPoint(
-        box.x + box.width / 2 + x,
-        box.y + box.height / 2 + y,
-        transformListToTransform(tlist).matrix
-      )
 
       // Remove the rotation transform from the list
       for (let i = 0; i < tlist.numberOfItems; ++i) {

package/core/sanitize.js

@@ -21,7 +21,7 @@ const REVERSE_NS = getReverseNS()
 const svgGenericWhiteList = ['class', 'id', 'display', 'transform', 'style']
 const svgWhiteList_ = {
   // SVG Elements
-  a: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'xlink:href', 'xlink:title'],
+  a: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'href', 'mask', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'xlink:href', 'xlink:title'],
   circle: ['clip-path', 'clip-rule', 'cx', 'cy', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'r', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage'],
   clipPath: ['clipPathUnits'],
   defs: [],
@@ -36,20 +36,20 @@ const svgWhiteList_ = {
   feMergeNode: ['in'],
   feMorphology: ['in', 'operator', 'radius'],
   feOffset: ['dx', 'in', 'dy', 'result'],
-  filter: ['color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'],
+  filter: ['color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'href', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'],
   foreignObject: ['font-size', 'height', 'opacity', 'requiredFeatures', 'width', 'x', 'y'],
   g: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'font-family', 'font-size', 'font-style', 'font-weight', 'text-anchor'],
-  image: ['clip-path', 'clip-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'systemLanguage', 'width', 'x', 'xlink:href', 'xlink:title', 'y'],
+  image: ['clip-path', 'clip-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'systemLanguage', 'width', 'x', 'href', 'xlink:href', 'xlink:title', 'y'],
   line: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'x1', 'x2', 'y1', 'y2'],
-  linearGradient: ['gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'xlink:href', 'y1', 'y2'],
+  linearGradient: ['gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'href', 'xlink:href', 'y1', 'y2'],
   marker: ['markerHeight', 'markerUnits', 'markerWidth', 'orient', 'preserveAspectRatio', 'refX', 'refY', 'se_type', 'systemLanguage', 'viewBox'],
   mask: ['height', 'maskContentUnits', 'maskUnits', 'width', 'x', 'y'],
   metadata: [],
   path: ['clip-path', 'clip-rule', 'd', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage'],
-  pattern: ['height', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y'],
+  pattern: ['height', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'systemLanguage', 'viewBox', 'width', 'x', 'href', 'xlink:href', 'y'],
   polygon: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'sides', 'shape', 'edge', 'point', 'starRadiusMultiplier', 'r', 'radialshift', 'r2', 'orient', 'cx', 'cy'],
   polyline: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'se:connector'],
-  radialGradient: ['cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href'],
+  radialGradient: ['cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'href', 'xlink:href'],
   rect: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'width', 'x', 'y'],
   stop: ['offset', 'requiredFeatures', 'stop-opacity', 'systemLanguage', 'stop-color', 'gradientUnits', 'gradientTransform'],
   style: ['type'],
@@ -57,10 +57,22 @@ const svgWhiteList_ = {
   switch: ['requiredFeatures', 'systemLanguage'],
   symbol: ['fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'opacity', 'overflow', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'viewBox', 'width', 'height'],
   text: ['clip-path', 'clip-rule', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'letter-spacing', 'word-spacing', 'text-decoration', 'textLength', 'lengthAdjust', 'x', 'xml:space', 'y'],
-  textPath: ['dominant-baseline', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'systemLanguage', 'xlink:href'],
+  textPath: ['dominant-baseline', 'href', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'systemLanguage', 'xlink:href'],
   title: [],
   tspan: ['clip-path', 'clip-rule', 'dx', 'dy', 'dominant-baseline', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'systemLanguage', 'text-anchor', 'textLength', 'x', 'xml:space', 'y'],
-  use: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'width', 'x', 'xlink:href', 'y', 'overflow'],
+  use: ['clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'href', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'width', 'x', 'xlink:href', 'y', 'overflow'],
+  // Filter Primitives
+  feComponentTransfer: ['in', 'result'],
+  feFuncR: ['type', 'tableValues', 'slope', 'intercept', 'amplitude', 'exponent', 'offset'],
+  feFuncG: ['type', 'tableValues', 'slope', 'intercept', 'amplitude', 'exponent', 'offset'],
+  feFuncB: ['type', 'tableValues', 'slope', 'intercept', 'amplitude', 'exponent', 'offset'],
+  feFuncA: ['type', 'tableValues', 'slope', 'intercept', 'amplitude', 'exponent', 'offset'],
+  feConvolveMatrix: ['in', 'order', 'kernelMatrix', 'divisor', 'bias', 'targetX', 'targetY', 'edgeMode', 'kernelUnitLength', 'preserveAlpha'],
+  feDiffuseLighting: ['in', 'surfaceScale', 'diffuseConstant', 'kernelUnitLength', 'lighting-color'],
+  feSpecularLighting: ['in', 'surfaceScale', 'specularConstant', 'specularExponent', 'kernelUnitLength', 'lighting-color'],
+  feDisplacementMap: ['in', 'in2', 'scale', 'xChannelSelector', 'yChannelSelector'],
+  feTurbulence: ['baseFrequency', 'numOctaves', 'result', 'seed', 'stitchTiles', 'type'],
+  feTile: ['in'],
 
   // MathML Elements
   annotation: ['encoding'],
@@ -79,7 +91,7 @@ const svgWhiteList_ = {
   mphantom: [],
   mprescripts: [],
   mroot: [],
-  mrow: ['xlink:href', 'xlink:type', 'xmlns:xlink'],
+  mrow: ['href', 'xlink:href', 'xlink:type', 'xmlns:xlink'],
   mspace: ['depth', 'height', 'width'],
   msqrt: [],
   mstyle: ['displaystyle', 'mathbackground', 'mathcolor', 'mathvariant', 'scriptlevel'],
@@ -93,9 +105,25 @@ const svgWhiteList_ = {
   munder: [],
   munderover: [],
   none: [],
-  semantics: []
+  semantics: [],
+
+  // HTML Elements for use in a foreignObject
+  div: [],
+  p: [],
+  li: [],
+  pre: [],
+  ol: [],
+  ul: [],
+  span: [],
+  hr: [],
+  br: [],
+  h1: [],
+  h2: [],
+  h3: [],
+  h4: [],
+  h5: [],
+  h6: []
 }
-/* eslint-enable max-len */
 
 // add generic attributes to all elements of the whitelist
 Object.keys(svgWhiteList_).forEach((element) => { svgWhiteList_[element] = [...svgWhiteList_[element], ...svgGenericWhiteList] })
@@ -162,16 +190,20 @@ export const sanitizeSvg = (node) => {
       // our whitelist or is a namespace declaration for one of our allowed namespaces
       if (attrNsURI !== allowedAttrsNS[attrLocalName] && attrNsURI !== NS.XMLNS &&
        !(attrNsURI === NS.XMLNS && REVERSE_NS[attr.value])) {
-        // Bypassing the whitelist to allow se: and oi: prefixes
-        // We can add specific namepaces on demand for now.
-        // Is there a more appropriate way to do this?
-        if (attrName.startsWith('se:') || attrName.startsWith('oi:') || attrName.startsWith('data-')) {
-          // We should bypass the namespace aswell
-          const seAttrNS = (attrName.startsWith('se:')) ? NS.SE : ((attrName.startsWith('oi:')) ? NS.OI : null)
-          seAttrs.push([attrName, attr.value, seAttrNS])
-        } else {
-          console.warn(`sanitizeSvg: attribute ${attrName} in element ${node.nodeName} not in whitelist is removed`)
-          node.removeAttributeNS(attrNsURI, attrLocalName)
+        // Special case: allow href attribute even without namespace if it's in the whitelist
+        const isHrefAttribute = (attrLocalName === 'href' && allowedAttrs.includes('href'))
+        if (!isHrefAttribute) {
+          // Bypassing the whitelist to allow se: and oi: prefixes
+          // We can add specific namepaces on demand for now.
+          // Is there a more appropriate way to do this?
+          if (attrName.startsWith('se:') || attrName.startsWith('oi:') || attrName.startsWith('data-')) {
+            // We should bypass the namespace aswell
+            const seAttrNS = (attrName.startsWith('se:')) ? NS.SE : ((attrName.startsWith('oi:')) ? NS.OI : null)
+            seAttrs.push([attrName, attr.value, seAttrNS])
+          } else {
+            console.warn(`sanitizeSvg: attribute ${attrName} in element ${node.nodeName} not in whitelist is removed: ${node.outerHTML}`)
+            node.removeAttributeNS(attrNsURI, attrLocalName)
+          }
         }
       }
 
@@ -196,34 +228,35 @@ export const sanitizeSvg = (node) => {
       node.setAttributeNS(ns, att, val)
     })
 
-    // for some elements that have a xlink:href, ensure the URI refers to a local element
-    // (but not for links)
+    // for some elements that have a xlink:href or href, ensure the URI refers to a local element
+    // (but not for links and other elements where external hrefs are allowed)
     const href = getHref(node)
     if (href &&
       ['filter', 'linearGradient', 'pattern',
         'radialGradient', 'textPath', 'use'].includes(node.nodeName) && href[0] !== '#') {
       // remove the attribute (but keep the element)
       setHref(node, '')
-      console.warn(`sanitizeSvg: attribute href in element ${node.nodeName} pointing to a non-local reference (${href}) is removed`)
+      console.warn(`sanitizeSvg: attribute href in element ${node.nodeName} pointing to a non-local reference (${href}) is removed: ${node.outerHTML}`)
       node.removeAttributeNS(NS.XLINK, 'href')
+      node.removeAttribute('href')
     }
 
     // Safari crashes on a <use> without a xlink:href, so we just remove the node here
     if (node.nodeName === 'use' && !getHref(node)) {
-      console.warn(`sanitizeSvg: element ${node.nodeName} without a xlink:href is removed`)
+      console.warn(`sanitizeSvg: element ${node.nodeName} without a xlink:href or href is removed: ${node.outerHTML}`)
       node.remove()
       return
     }
     // if the element has attributes pointing to a non-local reference,
     // need to remove the attribute
-    Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], (attr) => {
+    ['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'].forEach((attr) => {
       let val = node.getAttribute(attr)
       if (val) {
         val = getUrlFromAttr(val)
         // simply check for first character being a '#'
         if (val && val[0] !== '#') {
           node.setAttribute(attr, '')
-          console.warn(`sanitizeSvg: attribute ${attr} in element ${node.nodeName} pointing to a non-local reference (${val}) is removed`)
+          console.warn(`sanitizeSvg: attribute ${attr} in element ${node.nodeName} pointing to a non-local reference (${val}) is removed: ${node.outerHTML}`)
           node.removeAttribute(attr)
         }
       }
@@ -236,7 +269,7 @@ export const sanitizeSvg = (node) => {
   } else {
     // remove all children from this node and insert them before this node
     // TODO: in the case of animation elements this will hardly ever be correct
-    console.warn(`sanitizeSvg: element ${node.nodeName} not supported is removed`)
+    console.warn(`sanitizeSvg: element ${node.nodeName} not supported is removed: ${node.outerHTML}`)
     const children = []
     while (node.hasChildNodes()) {
       children.push(parent.insertBefore(node.firstChild, node))

package/core/svg-exec.js

@@ -12,6 +12,7 @@ import {
   text2xml,
   cleanupElement,
   findDefs,
+  setHref,
   getHref,
   preventClickDefault,
   toXml,
@@ -144,7 +145,7 @@ const svgToString = (elem, indent) => {
       out.push(' ')
     }
     out.push('<')
-    out.push(elem.nodeName)
+    out.push(elem.localName)
     if (elem.id === 'svgcontent') {
       // Process root element separately
       const res = svgCanvas.getResolution()
@@ -352,7 +353,7 @@ const svgToString = (elem, indent) => {
         }
       }
       out.push('</')
-      out.push(elem.nodeName)
+      out.push(elem.localName)
       out.push('>')
     } else {
       out.push('/>')
@@ -443,7 +444,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
           }
@@ -858,7 +860,7 @@ 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)

package/core/utilities.js

@@ -376,21 +376,22 @@ export const getUrlFromAttr = function (attrVal) {
 /**
  * @function module:utilities.getHref
  * @param {Element} elem
- * @returns {string} The given element's `xlink:href` value
+ * @returns {string} The given element's `href` value
  */
 export let getHref = function (elem) {
-  return elem.getAttributeNS(NS.XLINK, 'href')
+  // Prefer 'href', fallback to 'xlink:href'
+  return elem.getAttribute('href') || elem.getAttributeNS(NS.XLINK, 'href')
 }
 
 /**
- * Sets the given element's `xlink:href` value.
+ * Sets the given element's `href` value.
  * @function module:utilities.setHref
  * @param {Element} elem
  * @param {string} val
  * @returns {void}
  */
 export let setHref = function (elem, val) {
-  elem.setAttributeNS(NS.XLINK, 'xlink:href', val)
+  elem.setAttribute('href', val)
 }
 
 /**
@@ -665,38 +666,38 @@ export const getPathDFromElement = function (elem) {
       const h = b.height
       num = 4 - num // Why? Because!
 
-      d = (!rx && !ry)
-      // Regular rect
-        ? getPathDFromSegments([
-          ['M', [x, y]],
-          ['L', [x + w, y]],
-          ['L', [x + w, y + h]],
-          ['L', [x, y + h]],
-          ['L', [x, y]],
-          ['Z', []]
-        ])
-        : getPathDFromSegments([
-          ['M', [x, y + ry]],
-          ['C', [x, y + ry / num, x + rx / num, y, x + rx, y]],
-          ['L', [x + w - rx, y]],
-          ['C', [x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry]],
-          ['L', [x + w, y + h - ry]],
-          [
-            'C',
+      d =
+        !rx && !ry // Regular rect
+          ? getPathDFromSegments([
+            ['M', [x, y]],
+            ['L', [x + w, y]],
+            ['L', [x + w, y + h]],
+            ['L', [x, y + h]],
+            ['L', [x, y]],
+            ['Z', []]
+          ])
+          : getPathDFromSegments([
+            ['M', [x, y + ry]],
+            ['C', [x, y + ry / num, x + rx / num, y, x + rx, y]],
+            ['L', [x + w - rx, y]],
+            ['C', [x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry]],
+            ['L', [x + w, y + h - ry]],
             [
-              x + w,
-              y + h - ry / num,
-              x + w - rx / num,
-              y + h,
-              x + w - rx,
-              y + h
-            ]
-          ],
-          ['L', [x + rx, y + h]],
-          ['C', [x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry]],
-          ['L', [x, y + ry]],
-          ['Z', []]
-        ])
+              'C',
+              [
+                x + w,
+                y + h - ry / num,
+                x + w - rx / num,
+                y + h,
+                x + w - rx,
+                y + h
+              ]
+            ],
+            ['L', [x + rx, y + h]],
+            ['C', [x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry]],
+            ['L', [x, y + ry]],
+            ['Z', []]
+          ])
       break
     }
     default: