@eturnity/dom_to_svg 8.22.0 → 8.34.0

package/lib/css.js

@@ -1,96 +1,108 @@
-export const isCSSFontFaceRule = (rule) => rule.type === CSSRule.FONT_FACE_RULE;
-export const isInline = (styles) => styles.displayOutside === 'inline' || styles.display.startsWith('inline-');
-export const isPositioned = (styles) => styles.position !== 'static';
-export const isInFlow = (styles) => styles.float !== 'none' && styles.position !== 'absolute' && styles.position !== 'fixed';
-export const isTransparent = (color) => color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
-export const hasUniformBorder = (styles) => parseFloat(styles.borderTopWidth) !== 0 &&
-    styles.borderTopStyle !== 'none' &&
-    styles.borderTopStyle !== 'inset' &&
-    styles.borderTopStyle !== 'outset' &&
-    !isTransparent(styles.borderTopColor) &&
-    // Cannot use border property directly as in Firefox those are empty strings.
-    // Need to get the specific border properties from the specific sides.
-    // https://stackoverflow.com/questions/41696063/getcomputedstyle-returns-empty-strings-on-ff-when-instead-crome-returns-a-comp
-    styles.borderTopWidth === styles.borderLeftWidth &&
-    styles.borderTopWidth === styles.borderRightWidth &&
-    styles.borderTopWidth === styles.borderBottomWidth &&
-    styles.borderTopColor === styles.borderLeftColor &&
-    styles.borderTopColor === styles.borderRightColor &&
-    styles.borderTopColor === styles.borderBottomColor &&
-    styles.borderTopStyle === styles.borderLeftStyle &&
-    styles.borderTopStyle === styles.borderRightStyle &&
-    styles.borderTopStyle === styles.borderBottomStyle;
+export const isCSSFontFaceRule = rule => rule.type === CSSRule.FONT_FACE_RULE
+export const isInline = styles => styles.displayOutside === 'inline' || styles.display.startsWith('inline-')
+export const isPositioned = styles => styles.position !== 'static'
+export const isInFlow = styles =>
+  styles.float !== 'none' && styles.position !== 'absolute' && styles.position !== 'fixed'
+export const isTransparent = color => color === 'transparent' || color === 'rgba(0, 0, 0, 0)'
+export const hasUniformBorder = styles =>
+  parseFloat(styles.borderTopWidth) !== 0 &&
+  styles.borderTopStyle !== 'none' &&
+  styles.borderTopStyle !== 'inset' &&
+  styles.borderTopStyle !== 'outset' &&
+  !isTransparent(styles.borderTopColor) &&
+  // Cannot use border property directly as in Firefox those are empty strings.
+  // Need to get the specific border properties from the specific sides.
+  // https://stackoverflow.com/questions/41696063/getcomputedstyle-returns-empty-strings-on-ff-when-instead-crome-returns-a-comp
+  styles.borderTopWidth === styles.borderLeftWidth &&
+  styles.borderTopWidth === styles.borderRightWidth &&
+  styles.borderTopWidth === styles.borderBottomWidth &&
+  styles.borderTopColor === styles.borderLeftColor &&
+  styles.borderTopColor === styles.borderRightColor &&
+  styles.borderTopColor === styles.borderBottomColor &&
+  styles.borderTopStyle === styles.borderLeftStyle &&
+  styles.borderTopStyle === styles.borderRightStyle &&
+  styles.borderTopStyle === styles.borderBottomStyle
 /** The 4 sides of a box. */
-const SIDES = ['top', 'bottom', 'right', 'left'];
+const SIDES = ['top', 'bottom', 'right', 'left']
 /** Whether the given side is a horizontal side. */
-export const isHorizontal = (side) => side === 'bottom' || side === 'top';
+export const isHorizontal = side => side === 'bottom' || side === 'top'
 /**
  * The two corners for each side, in order of lower coordinate to higher coordinate.
  */
 const CORNERS = {
-    top: ['left', 'right'],
-    bottom: ['left', 'right'],
-    left: ['top', 'bottom'],
-    right: ['top', 'bottom'],
-};
+  top: ['left', 'right'],
+  bottom: ['left', 'right'],
+  left: ['top', 'bottom'],
+  right: ['top', 'bottom'],
+}
 /**
  * Returns the (elliptic) border radii for a given side.
  * For example, for the top side it will return the horizontal top-left and the horizontal top-right border radii.
  */
-export function getBorderRadiiForSide(side, styles, bounds) {
-    var _a, _b, _c, _d;
-    const [horizontalStyle1, verticalStyle1] = styles
-        .getPropertyValue(isHorizontal(side)
-        ? `border-${side}-${CORNERS[side][0]}-radius`
-        : `border-${CORNERS[side][0]}-${side}-radius`)
-        .split(' ');
-    const [horizontalStyle2, verticalStyle2] = styles
-        .getPropertyValue(isHorizontal(side)
-        ? `border-${side}-${CORNERS[side][1]}-radius`
-        : `border-${CORNERS[side][1]}-${side}-radius`)
-        .split(' ');
-    if (isHorizontal(side)) {
-        return [
-            (_a = parseCSSLength(horizontalStyle1 || '0px', bounds.width)) !== null && _a !== void 0 ? _a : 0,
-            (_b = parseCSSLength(horizontalStyle2 || '0px', bounds.width)) !== null && _b !== void 0 ? _b : 0,
-        ];
-    }
+export function getBorderRadiiForSide(side, styles, bounds, zoom) {
+  var _a, _b, _c, _d
+  const [horizontalStyle1, verticalStyle1] = styles
+    .getPropertyValue(
+      isHorizontal(side) ? `border-${side}-${CORNERS[side][0]}-radius` : `border-${CORNERS[side][0]}-${side}-radius`
+    )
+    .split(' ')
+  const [horizontalStyle2, verticalStyle2] = styles
+    .getPropertyValue(
+      isHorizontal(side) ? `border-${side}-${CORNERS[side][1]}-radius` : `border-${CORNERS[side][1]}-${side}-radius`
+    )
+    .split(' ')
+  if (isHorizontal(side)) {
     return [
-        (_c = parseCSSLength(verticalStyle1 || horizontalStyle1 || '0px', bounds.height)) !== null && _c !== void 0 ? _c : 0,
-        (_d = parseCSSLength(verticalStyle2 || horizontalStyle2 || '0px', bounds.height)) !== null && _d !== void 0 ? _d : 0,
-    ];
+      (_a = parseCSSLength(horizontalStyle1 || '0px', bounds.width, zoom)) !== null && _a !== void 0 ? _a : 0,
+      (_b = parseCSSLength(horizontalStyle2 || '0px', bounds.width, zoom)) !== null && _b !== void 0 ? _b : 0,
+    ]
+  }
+  return [
+    (_c = parseCSSLength(verticalStyle1 || horizontalStyle1 || '0px', bounds.height, zoom)) !== null && _c !== void 0
+      ? _c
+      : 0,
+    (_d = parseCSSLength(verticalStyle2 || horizontalStyle2 || '0px', bounds.height, zoom)) !== null && _d !== void 0
+      ? _d
+      : 0,
+  ]
 }
 /**
  * Returns the factor by which all border radii have to be scaled to fit correctly.
  *
  * @see https://drafts.csswg.org/css-backgrounds-3/#corner-overlap
  */
-export const calculateOverlappingCurvesFactor = (styles, bounds) => Math.min(...SIDES.map(side => {
-    const length = isHorizontal(side) ? bounds.width : bounds.height;
-    const radiiSum = getBorderRadiiForSide(side, styles, bounds).reduce((sum, radius) => sum + radius, 0);
-    return length / radiiSum;
-}), 1);
-export const isVisible = (styles) => styles.displayOutside !== 'none' &&
-    styles.display !== 'none' &&
-    styles.visibility !== 'hidden' &&
-    styles.opacity !== '0';
-export function parseCSSLength(length, containerLength) {
-    if (length.endsWith('px')) {
-        return parseFloat(length);
-    }
-    if (length.endsWith('%')) {
-        return (parseFloat(length) / 100) * containerLength;
-    }
-    return undefined;
+export const calculateOverlappingCurvesFactor = (styles, bounds) =>
+  Math.min(
+    ...SIDES.map(side => {
+      const length = isHorizontal(side) ? bounds.width : bounds.height
+      const radiiSum = getBorderRadiiForSide(side, styles, bounds).reduce((sum, radius) => sum + radius, 0)
+      return length / radiiSum
+    }),
+    1
+  )
+export const isVisible = styles =>
+  styles.displayOutside !== 'none' &&
+  styles.display !== 'none' &&
+  styles.visibility !== 'hidden' &&
+  styles.opacity !== '0'
+export function parseCSSLength(length, containerLength, zoom = 1) {
+  if (length.endsWith('px')) {
+    return parseFloat(length) * zoom
+  }
+  if (length.endsWith('%')) {
+    return (parseFloat(length) / 100) * containerLength
+  }
+  return undefined
 }
-export const unescapeStringValue = (value) => value
+export const unescapeStringValue = value =>
+  value
     // Replace hex escape sequences
     .replace(/\\([\da-f]{1,2})/gi, (substring, codePoint) => String.fromCodePoint(parseInt(codePoint, 16)))
     // Replace all other escapes (quotes, backslash, etc)
-    .replace(/\\(.)/g, '$1');
+    .replace(/\\(.)/g, '$1')
 export function copyCssStyles(from, to) {
-    for (const property of from) {
-        to.setProperty(property, from.getPropertyValue(property), from.getPropertyPriority(property));
-    }
+  for (const property of from) {
+    to.setProperty(property, from.getPropertyValue(property), from.getPropertyPriority(property))
+  }
 }
-//# sourceMappingURL=css.js.map
+//# sourceMappingURL=css.js.map

package/lib/element.js

@@ -373,19 +373,20 @@ function createBackgroundAndBorderBox(bounds, styles, context) {
     // Need to get the border property from some specific side (they are all the same in this condition).
     // https://stackoverflow.com/questions/41696063/getcomputedstyle-returns-empty-strings-on-ff-when-instead-crome-returns-a-comp
     background.setAttribute('stroke', styles.borderTopColor)
-    background.setAttribute('stroke-width', adjustSizeWithZoom(styles.borderTopWidth, context.zoom))
-    if (styles.borderTopStyle === 'dashed') {
+    background.setAttribute('stroke-width', adjustSizeWithZoom(styles.borderBottomWidth, context.zoom))
+    if (styles.borderBottomStyle === 'dashed') {
       // > Displays a series of short square-ended dashes or line segments.
       // > The exact size and length of the segments are not defined by the specification and are implementation-specific.
-      background.setAttribute('stroke-dasharray', '1')
+      background.setAttribute('stroke-dasharray', '4')
     }
   }
   // Set border radius
   // Approximation, always assumes uniform border-radius by using the top-left horizontal radius and the top-left vertical radius for all corners.
   // TODO support irregular border radii on all corners by drawing border as a <path>.
   const overlappingCurvesFactor = calculateOverlappingCurvesFactor(styles, bounds)
-  const radiusX = getBorderRadiiForSide('top', styles, bounds)[0] * overlappingCurvesFactor * context.zoom
-  const radiusY = getBorderRadiiForSide('left', styles, bounds)[0] * overlappingCurvesFactor * context.zoom
+
+  const radiusX = getBorderRadiiForSide('top', styles, bounds, context.zoom)[0] * overlappingCurvesFactor
+  const radiusY = getBorderRadiiForSide('left', styles, bounds, context.zoom)[0] * overlappingCurvesFactor
   if (radiusX !== 0) {
     background.setAttribute('rx', radiusX.toString())
   }
@@ -414,7 +415,13 @@ function createBorder(styles, bounds, side, context) {
   border.setAttribute('stroke-linecap', 'square')
   const color = styles.getPropertyValue(`border-${side}-color`)
   border.setAttribute('stroke', color)
-  border.setAttribute('stroke-width', styles.getPropertyValue(`border-${side}-width`))
+  border.setAttribute('fill', 'transparent')
+  border.setAttribute('stroke-width', adjustSizeWithZoom(styles.getPropertyValue(`border-${side}-width`), context.zoom))
+
+  const borderSideStyle = styles.getPropertyValue(`border-${side}-style`)
+  if (borderSideStyle === 'dashed') {
+    border.setAttribute('stroke-dasharray', 4 * context.zoom)
+  }
   // Handle inset/outset borders
   const borderStyle = styles.getPropertyValue(`border-${side}-style`)
   if (

package/lib/svg.js

@@ -1,245 +1,255 @@
-import cssValueParser from 'postcss-value-parser';
-import { parseCSSLength } from './css.js';
-import { isElement, isSVGAnchorElement, isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isSVGTextContentElement, isTextNode, svgNamespace, } from './dom.js';
-import { copyTextStyles } from './text.js';
-import { assert, diagonale } from './util.js';
+import cssValueParser from 'postcss-value-parser'
+import { parseCSSLength } from './css.js'
+import {
+  isElement,
+  isSVGAnchorElement,
+  isSVGElement,
+  isSVGGraphicsElement,
+  isSVGSVGElement,
+  isSVGTextContentElement,
+  isTextNode,
+  svgNamespace,
+} from './dom.js'
+import { copyTextStyles } from './text.js'
+import { assert, diagonale } from './util.js'
 /**
  * Recursively clone an `<svg>` element, inlining it into the output SVG document with the necessary transforms.
  */
 export function handleSvgNode(node, context) {
-    if (isElement(node)) {
-        if (!isSVGElement(node)) {
-            return;
-        }
-        handleSvgElement(node, context);
-    }
-    else if (isTextNode(node)) {
-        const clonedTextNode = node.cloneNode(true);
-        context.currentSvgParent.append(clonedTextNode);
+  if (isElement(node)) {
+    if (!isSVGElement(node)) {
+      return
     }
+    handleSvgElement(node, context)
+  } else if (isTextNode(node)) {
+    const clonedTextNode = node.cloneNode(true)
+    context.currentSvgParent.append(clonedTextNode)
+  }
 }
-const ignoredElements = new Set(['script', 'style', 'foreignElement']);
-const URL_ID_REFERENCE_REGEX = /\burl\(["']?#/;
+const ignoredElements = new Set(['script', 'style', 'foreignElement'])
+const URL_ID_REFERENCE_REGEX = /\burl\(["']?#/
 export function handleSvgElement(element, context) {
-    var _a, _b, _c, _d;
-    if (ignoredElements.has(element.tagName)) {
-        return;
+  var _a, _b, _c, _d
+  if (ignoredElements.has(element.tagName)) {
+    return
+  }
+  let elementToAppend
+  if (isSVGSVGElement(element)) {
+    const contentContainer = context.svgDocument.createElementNS(svgNamespace, 'g')
+    elementToAppend = contentContainer
+    contentContainer.classList.add('svg-content', ...element.classList)
+    contentContainer.dataset.viewBox = (_a = element.getAttribute('viewBox')) !== null && _a !== void 0 ? _a : ''
+    contentContainer.dataset.width = (_b = element.getAttribute('width')) !== null && _b !== void 0 ? _b : ''
+    contentContainer.dataset.height = (_c = element.getAttribute('height')) !== null && _c !== void 0 ? _c : ''
+    // Since the SVG is getting inlined into the output SVG, we need to transform its contents according to its
+    // viewBox, width, height and preserveAspectRatio. We can use getScreenCTM() for this on one of its
+    // SVGGraphicsElement children (in Chrome calling it on the <svg> works too, but not in Firefox:
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=873106).
+    for (const child of element.children) {
+      if (!isSVGGraphicsElement(child)) {
+        continue
+      }
+      let viewBoxTransformMatrix =
+        // When this function is called on an inline <svg> element in the original DOM, we want
+        // getScreenCTM() to map it to the DOM coordinate system. When this function is called from
+        // inlineResources() the <svg> is already embedded into the output <svg>. In that case the output
+        // SVG already has a viewBox, and the coordinate system of the SVG is not equal to the coordinate
+        // system of the screen, therefor we need to use getCTM() to map it into the output SVG's
+        // coordinate system.
+        child.ownerDocument !== context.svgDocument &&
+        // When we inline an SVG, we put a transform on it for the getScreenCTM(). When that SVG also
+        // contains another SVG, the inner SVG should just get transformed relative to the outer SVG, not
+        // relative to the screen, because the transforms will stack in the output SVG.
+        !((_d = element.parentElement) === null || _d === void 0 ? void 0 : _d.closest('svg'))
+          ? child.getScreenCTM()
+          : child.getCTM()
+      // This should only be null if the <svg> is `display: none`
+      if (!viewBoxTransformMatrix) {
+        break
+      }
+      // Make sure to handle a child that already has a transform. That transform should only apply to the
+      // child, not to the entire SVG contents, so we need to calculate it out.
+      if (child.transform.baseVal.numberOfItems > 0) {
+        child.transform.baseVal.consolidate()
+        const existingTransform = child.transform.baseVal.getItem(0).matrix
+        viewBoxTransformMatrix = viewBoxTransformMatrix.multiply(existingTransform.inverse())
+      }
+      contentContainer.transform.baseVal.appendItem(
+        contentContainer.transform.baseVal.createSVGTransformFromMatrix(viewBoxTransformMatrix)
+      )
+      break
     }
-    let elementToAppend;
-    if (isSVGSVGElement(element)) {
-        const contentContainer = context.svgDocument.createElementNS(svgNamespace, 'g');
-        elementToAppend = contentContainer;
-        contentContainer.classList.add('svg-content', ...element.classList);
-        contentContainer.dataset.viewBox = (_a = element.getAttribute('viewBox')) !== null && _a !== void 0 ? _a : '';
-        contentContainer.dataset.width = (_b = element.getAttribute('width')) !== null && _b !== void 0 ? _b : '';
-        contentContainer.dataset.height = (_c = element.getAttribute('height')) !== null && _c !== void 0 ? _c : '';
-        // Since the SVG is getting inlined into the output SVG, we need to transform its contents according to its
-        // viewBox, width, height and preserveAspectRatio. We can use getScreenCTM() for this on one of its
-        // SVGGraphicsElement children (in Chrome calling it on the <svg> works too, but not in Firefox:
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=873106).
-        for (const child of element.children) {
-            if (!isSVGGraphicsElement(child)) {
-                continue;
-            }
-            let viewBoxTransformMatrix = 
-            // When this function is called on an inline <svg> element in the original DOM, we want
-            // getScreenCTM() to map it to the DOM coordinate system. When this function is called from
-            // inlineResources() the <svg> is already embedded into the output <svg>. In that case the output
-            // SVG already has a viewBox, and the coordinate system of the SVG is not equal to the coordinate
-            // system of the screen, therefor we need to use getCTM() to map it into the output SVG's
-            // coordinate system.
-            child.ownerDocument !== context.svgDocument &&
-                // When we inline an SVG, we put a transform on it for the getScreenCTM(). When that SVG also
-                // contains another SVG, the inner SVG should just get transformed relative to the outer SVG, not
-                // relative to the screen, because the transforms will stack in the output SVG.
-                !((_d = element.parentElement) === null || _d === void 0 ? void 0 : _d.closest('svg'))
-                ? child.getScreenCTM()
-                : child.getCTM();
-            // This should only be null if the <svg> is `display: none`
-            if (!viewBoxTransformMatrix) {
-                break;
-            }
-            // Make sure to handle a child that already has a transform. That transform should only apply to the
-            // child, not to the entire SVG contents, so we need to calculate it out.
-            if (child.transform.baseVal.numberOfItems > 0) {
-                child.transform.baseVal.consolidate();
-                const existingTransform = child.transform.baseVal.getItem(0).matrix;
-                viewBoxTransformMatrix = viewBoxTransformMatrix.multiply(existingTransform.inverse());
-            }
-            contentContainer.transform.baseVal.appendItem(contentContainer.transform.baseVal.createSVGTransformFromMatrix(viewBoxTransformMatrix));
-            break;
-        }
+  } else {
+    // Clone element
+    if (isSVGAnchorElement(element) && !context.options.keepLinks) {
+      elementToAppend = context.svgDocument.createElementNS(svgNamespace, 'g')
+    } else {
+      elementToAppend = element.cloneNode(false)
     }
-    else {
-        // Clone element
-        if (isSVGAnchorElement(element) && !context.options.keepLinks) {
-            elementToAppend = context.svgDocument.createElementNS(svgNamespace, 'g');
-        }
-        else {
-            elementToAppend = element.cloneNode(false);
-        }
-        // Remove event handlers
-        for (const attribute of elementToAppend.attributes) {
-            if (attribute.localName.startsWith('on')) {
-                elementToAppend.attributes.removeNamedItemNS(attribute.namespaceURI, attribute.localName);
-            }
-            else if (attribute.localName === 'href' && attribute.value.startsWith('javascript:')) {
-                elementToAppend.attributes.removeNamedItemNS(attribute.namespaceURI, attribute.localName);
-            }
-        }
-        const window = element.ownerDocument.defaultView;
-        assert(window, "Element's ownerDocument has no defaultView");
-        const svgViewportElement = element.ownerSVGElement;
-        assert(svgViewportElement, 'Expected element to have ownerSVGElement');
-        const styles = window.getComputedStyle(element);
-        if (isSVGGraphicsElement(element)) {
-            copyGraphicalPresentationAttributes(styles, elementToAppend, svgViewportElement.viewBox.animVal);
-            if (isSVGTextContentElement(element)) {
-                copyTextStyles(styles, elementToAppend);
-            }
-        }
-        // Namespace ID references url(#...)
-        for (const attribute of elementToAppend.attributes) {
-            if (attribute.localName === 'href') {
-                if (attribute.value.startsWith('#')) {
-                    attribute.value = attribute.value.replace('#', `#${context.idPrefix}`);
-                }
-            }
-            else if (URL_ID_REFERENCE_REGEX.test(attribute.value)) {
-                attribute.value = rewriteUrlIdReferences(attribute.value, context);
-            }
-        }
-        for (const property of elementToAppend.style) {
-            const value = elementToAppend.style.getPropertyValue(property);
-            if (URL_ID_REFERENCE_REGEX.test(value)) {
-                elementToAppend.style.setProperty(property, rewriteUrlIdReferences(value, context), elementToAppend.style.getPropertyPriority(property));
-            }
-        }
+    // Remove event handlers
+    for (const attribute of elementToAppend.attributes) {
+      if (attribute.localName.startsWith('on')) {
+        elementToAppend.attributes.removeNamedItemNS(attribute.namespaceURI, attribute.localName)
+      } else if (attribute.localName === 'href' && attribute.value.startsWith('javascript:')) {
+        elementToAppend.attributes.removeNamedItemNS(attribute.namespaceURI, attribute.localName)
+      }
     }
-    // Make sure all IDs are unique
-    if (elementToAppend.id) {
-        elementToAppend.id = context.idPrefix + elementToAppend.id;
+    const window = element.ownerDocument.defaultView
+    assert(window, "Element's ownerDocument has no defaultView")
+    const svgViewportElement = element.ownerSVGElement
+    assert(svgViewportElement, 'Expected element to have ownerSVGElement')
+    const styles = window.getComputedStyle(element)
+    if (isSVGGraphicsElement(element)) {
+      copyGraphicalPresentationAttributes(styles, elementToAppend, svgViewportElement.viewBox.animVal)
+      if (isSVGTextContentElement(element)) {
+        copyTextStyles(styles, elementToAppend)
+      }
     }
-    context.currentSvgParent.append(elementToAppend);
-    for (const child of element.childNodes) {
-        handleSvgNode(child, { ...context, currentSvgParent: elementToAppend });
+    // Namespace ID references url(#...)
+    for (const attribute of elementToAppend.attributes) {
+      if (attribute.localName === 'href') {
+        if (attribute.value.startsWith('#')) {
+          attribute.value = attribute.value.replace('#', `#${context.idPrefix}`)
+        }
+      } else if (URL_ID_REFERENCE_REGEX.test(attribute.value)) {
+        attribute.value = rewriteUrlIdReferences(attribute.value, context)
+      }
+    }
+    for (const property of elementToAppend.style) {
+      const value = elementToAppend.style.getPropertyValue(property)
+      if (URL_ID_REFERENCE_REGEX.test(value)) {
+        elementToAppend.style.setProperty(
+          property,
+          rewriteUrlIdReferences(value, context),
+          elementToAppend.style.getPropertyPriority(property)
+        )
+      }
     }
+  }
+  // Make sure all IDs are unique
+  if (elementToAppend.id) {
+    elementToAppend.id = context.idPrefix + elementToAppend.id
+  }
+  context.currentSvgParent.append(elementToAppend)
+  for (const child of element.childNodes) {
+    handleSvgNode(child, { ...context, currentSvgParent: elementToAppend })
+  }
 }
 const graphicalPresentationAttributes = [
-    'alignment-baseline',
-    'baseline-shift',
-    // 'clip',
-    'clip-path',
-    'clip-rule',
-    'color',
-    'color-interpolation',
-    'color-interpolation-filters',
-    // 'color-profile',
-    'color-rendering',
-    // 'cursor',
-    'direction',
-    // 'display',
-    // 'enable-background',
-    'fill',
-    'fill-opacity',
-    'fill-rule',
-    'filter',
-    'flood-color',
-    'flood-opacity',
-    'image-rendering',
-    'lighting-color',
-    'marker-end',
-    'marker-mid',
-    'marker-start',
-    'mask',
-    'opacity',
-    // 'overflow',
-    'pointer-events',
-    'shape-rendering',
-    // 'solid-color',
-    // 'solid-opacity',
-    'stop-color',
-    'stop-opacity',
-    'stroke',
-    'stroke-dasharray',
-    'stroke-dashoffset',
-    'stroke-linecap',
-    'stroke-linejoin',
-    'stroke-miterlimit',
-    'stroke-opacity',
-    'stroke-width',
-    'transform',
-    'vector-effect',
-    'visibility',
-];
+  'alignment-baseline',
+  'baseline-shift',
+  // 'clip',
+  'clip-path',
+  'clip-rule',
+  'color',
+  'color-interpolation',
+  'color-interpolation-filters',
+  // 'color-profile',
+  'color-rendering',
+  // 'cursor',
+  'direction',
+  // 'display',
+  // 'enable-background',
+  'fill',
+  'fill-opacity',
+  'fill-rule',
+  'filter',
+  'flood-color',
+  'flood-opacity',
+  'image-rendering',
+  'lighting-color',
+  'marker-end',
+  'marker-mid',
+  'marker-start',
+  'mask',
+  'opacity',
+  // 'overflow',
+  'pointer-events',
+  'shape-rendering',
+  // 'solid-color',
+  // 'solid-opacity',
+  'stop-color',
+  'stop-opacity',
+  'stroke',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'stroke-width',
+  'transform',
+  'vector-effect',
+  'visibility',
+]
 const defaults = {
-    'alignment-baseline': 'auto',
-    'baseline-shift': '0px',
-    'clip-path': 'none',
-    'clip-rule': 'nonzero',
-    'color-interpolation-filters': 'linearrgb',
-    'color-interpolation': 'srgb',
-    'color-rendering': 'auto',
-    'fill-opacity': '1',
-    'fill-rule': 'nonzero',
-    'flood-color': 'rgb(0, 0, 0)',
-    'flood-opacity': '1',
-    'image-rendering': 'auto',
-    'lighting-color': 'rgb(255, 255, 255)',
-    'marker-end': 'none',
-    'marker-mid': 'none',
-    'marker-start': 'none',
-    'pointer-events': 'auto',
-    'shape-rendering': 'auto',
-    'stop-color': 'rgb(0, 0, 0)',
-    'stop-opacity': '1',
-    'stroke-dasharray': 'none',
-    'stroke-dashoffset': '0px',
-    'stroke-linecap': 'butt',
-    'stroke-linejoin': 'miter',
-    'stroke-miterlimit': '4',
-    'stroke-opacity': '1',
-    'stroke-width': '1px',
-    'vector-effect': 'none',
-    color: '',
-    direction: 'ltr',
-    fill: '',
-    filter: 'none',
-    mask: 'none',
-    opacity: '1',
-    stroke: '',
-    transform: 'none',
-    visibility: 'visible',
-};
+  'alignment-baseline': 'auto',
+  'baseline-shift': '0px',
+  'clip-path': 'none',
+  'clip-rule': 'nonzero',
+  'color-interpolation-filters': 'linearrgb',
+  'color-interpolation': 'srgb',
+  'color-rendering': 'auto',
+  'fill-opacity': '1',
+  'fill-rule': 'nonzero',
+  'flood-color': 'rgb(0, 0, 0)',
+  'flood-opacity': '1',
+  'image-rendering': 'auto',
+  'lighting-color': 'rgb(255, 255, 255)',
+  'marker-end': 'none',
+  'marker-mid': 'none',
+  'marker-start': 'none',
+  'pointer-events': 'auto',
+  'shape-rendering': 'auto',
+  'stop-color': 'rgb(0, 0, 0)',
+  'stop-opacity': '1',
+  'stroke-dasharray': 'none',
+  'stroke-dashoffset': '0px',
+  'stroke-linecap': 'butt',
+  'stroke-linejoin': 'miter',
+  'stroke-miterlimit': '4',
+  'stroke-opacity': '1',
+  'stroke-width': '1px',
+  'vector-effect': 'none',
+  color: '',
+  direction: 'ltr',
+  fill: '',
+  filter: 'none',
+  mask: 'none',
+  opacity: '1',
+  stroke: '',
+  transform: 'none',
+  visibility: 'visible',
+}
 /**
  * Prefixes all ID references of the form `url(#id)` in the given string.
  */
 function rewriteUrlIdReferences(value, { idPrefix }) {
-    const parsedValue = cssValueParser(value);
-    parsedValue.walk(node => {
-        if (node.type !== 'function' || node.value !== 'url') {
-            return;
-        }
-        const urlArgument = node.nodes[0];
-        if (!urlArgument) {
-            return;
-        }
-        urlArgument.value = urlArgument.value.replace('#', `#${idPrefix}`);
-    });
-    return cssValueParser.stringify(parsedValue.nodes);
+  const parsedValue = cssValueParser(value)
+  parsedValue.walk(node => {
+    if (node.type !== 'function' || node.value !== 'url') {
+      return
+    }
+    const urlArgument = node.nodes[0]
+    if (!urlArgument) {
+      return
+    }
+    urlArgument.value = urlArgument.value.replace('#', `#${idPrefix}`)
+  })
+  return cssValueParser.stringify(parsedValue.nodes)
 }
 function copyGraphicalPresentationAttributes(styles, target, viewBox) {
-    var _a;
-    for (const attribute of graphicalPresentationAttributes) {
-        let value = styles.getPropertyValue(attribute);
-        if (value && value !== defaults[attribute]) {
-            if (value.endsWith('%')) {
-                // E.g. https://svgwg.org/svg2-draft/painting.html#StrokeWidth
-                // Percentages:	refer to the normalized diagonal of the current SVG viewport (see Units)
-                value = (_a = parseCSSLength(value, diagonale(viewBox))) !== null && _a !== void 0 ? _a : 0;
-            }
-            target.setAttribute(attribute, value.toString());
-        }
+  var _a
+  for (const attribute of graphicalPresentationAttributes) {
+    let value = styles.getPropertyValue(attribute)
+    if (value && value !== defaults[attribute]) {
+      if (value.endsWith('%')) {
+        // E.g. https://svgwg.org/svg2-draft/painting.html#StrokeWidth
+        // Percentages:	refer to the normalized diagonal of the current SVG viewport (see Units)
+        value = (_a = parseCSSLength(value, diagonale(viewBox))) !== null && _a !== void 0 ? _a : 0
+      }
+      target.setAttribute(attribute, value.toString())
     }
+  }
 }
-//# sourceMappingURL=svg.js.map
+//# sourceMappingURL=svg.js.map

package/lib/text.js

@@ -1,4 +1,4 @@
-import { isVisible } from './css.js'
+import { isVisible, parseCSSLength } from './css.js'
 import { svgNamespace } from './dom.js'
 import { doRectanglesIntersect, assert } from './util.js'
 export function handleTextNode(textNode, context) {
@@ -57,7 +57,8 @@ export function handleTextNode(textNode, context) {
         selection.removeAllRanges()
       }
       textSpan.setAttribute('x', lineRectangle.x.toString())
-      textSpan.setAttribute('y', lineRectangle.bottom.toString()) // intentionally bottom because of dominant-baseline setting
+      const bottomRectangle = lineRectangle.bottom - 1 * context.zoom
+      textSpan.setAttribute('y', bottomRectangle.toString()) // intentionally bottom because of dominant-baseline setting
       const textContent = textSpan.textContent || ''
       const textLength = textContent.length
       if (textLength > 0) {
@@ -68,8 +69,7 @@ export function handleTextNode(textNode, context) {
       }
       //   textSpan.setAttribute('textLength', lineRectangle.width.toString())
       //   textSpan.setAttribute('lengthAdjust', 'spacingAndGlyphs')
-      const calculatedFontSize = parseInt(parseInt(styles.fontSize) * context.zoom * 0.8) + 'px'
-      const originalFontSize = styles.fontSize
+      const calculatedFontSize = parseCSSLength(styles.fontSize, lineRectangle, context.zoom) + 'px'
       //   textSpan.setAttribute('data-original-font-size', originalFontSize)
       textSpan.setAttribute('font-size', calculatedFontSize)
       svgTextElement.append(textSpan)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/dom_to_svg",
   "author": "Eturnity Team",
-  "version": "8.22.0",
+  "version": "8.34.0",
   "description": "Take SVG screenshots of DOM elements",
   "main": "lib/index.js",
   "sideEffects": false,