search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
10.95k stars 1.07k forks source link

Generated SVGs are sometimes missing `xmlns:svgjs` namespace declaration #1285

Closed aloisklink closed 10 months ago

aloisklink commented 1 year ago

Bug report

Modifying an existing SVG sometimes adds svgjs:data attributes without declaring the svgjs XML namespace by using xmlns:svgjs="http://svgjs.dev/svgjs". This causes an XML parsing error.

Fiddle

https://jsfiddle.net/1x8fjk9e/3/

Both the input and output SVG look fine when rendered together on the same page (ignore the CSS issues, I'm not really sure why those are happening):

image

However, if you click the click here to view the broken output SVG link, you get the following error:

image

Explanation

This bug was originally discovered when trying to modify the width=100% to the actual pixel value using svgdom in Node.JS.

Node.JS reproduction

Input.svg

input

Test script

const { createSVGWindow } = require("svgdom");
const { SVG, registerWindow } = require("@svgdotjs/svg.js");

const window = createSVGWindow();
registerWindow(window, window.document);

const svg = SVG(require("fs").readFileSync("./input.svg", {encoding: "utf8"}))

svg.node.setAttribute("width", svg.bbox().width);

require("fs").writeFileSync("./output.svg", svg.svg())

Output.svg

output

diff input.svg output.svg

(I've run prettier on both the SVGs first to make the diff more beautiful)

6c6
<   width="100%"
---
>   width="622.2148603262063"
9c9
<   >#mermaid-1668355833995 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1668355833995 .error-icon{fill:#552222;}#mermaid-1668355833995 .error-text{fill:#552222;stroke:#552222;}#mermaid-1668355833995 .edge-thickness-normal{stroke-width:2px;}#mermaid-1668355833995 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1668355833995 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1668355833995 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1668355833995 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1668355833995 .marker{fill:#333333;stroke:#333333;}#mermaid-1668355833995 .marker.cross{stroke:#333333;}#mermaid-1668355833995 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1668355833995 .edge{stroke-width:3;}#mermaid-1668355833995 .section--1 rect,#mermaid-1668355833995 .section--1 path,#mermaid-1668355833995 .section--1 circle,#mermaid-1668355833995 .section--1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-1668355833995 .section--1 text{fill:#ffffff;}#mermaid-1668355833995 .node-icon--1{font-size:40px;color:#ffffff;}#mermaid-1668355833995 .section-edge--1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth--1{stroke-width:17;}#mermaid-1668355833995 .section--1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-0 rect,#mermaid-1668355833995 .section-0 path,#mermaid-1668355833995 .section-0 circle,#mermaid-1668355833995 .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-1668355833995 .section-0 text{fill:black;}#mermaid-1668355833995 .node-icon-0{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-1668355833995 .edge-depth-0{stroke-width:14;}#mermaid-1668355833995 .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-1 rect,#mermaid-1668355833995 .section-1 path,#mermaid-1668355833995 .section-1 circle,#mermaid-1668355833995 .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-1 text{fill:black;}#mermaid-1668355833995 .node-icon-1{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-1{stroke-width:11;}#mermaid-1668355833995 .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-2 rect,#mermaid-1668355833995 .section-2 path,#mermaid-1668355833995 .section-2 circle,#mermaid-1668355833995 .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-2 text{fill:#ffffff;}#mermaid-1668355833995 .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-1668355833995 .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-2{stroke-width:8;}#mermaid-1668355833995 .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-3 rect,#mermaid-1668355833995 .section-3 path,#mermaid-1668355833995 .section-3 circle,#mermaid-1668355833995 .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-3 text{fill:black;}#mermaid-1668355833995 .node-icon-3{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-3{stroke-width:5;}#mermaid-1668355833995 .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-4 rect,#mermaid-1668355833995 .section-4 path,#mermaid-1668355833995 .section-4 circle,#mermaid-1668355833995 .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-4 text{fill:black;}#mermaid-1668355833995 .node-icon-4{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-4{stroke-width:2;}#mermaid-1668355833995 .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-5 rect,#mermaid-1668355833995 .section-5 path,#mermaid-1668355833995 .section-5 circle,#mermaid-1668355833995 .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-5 text{fill:black;}#mermaid-1668355833995 .node-icon-5{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-5{stroke-width:-1;}#mermaid-1668355833995 .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-6 rect,#mermaid-1668355833995 .section-6 path,#mermaid-1668355833995 .section-6 circle,#mermaid-1668355833995 .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-6 text{fill:black;}#mermaid-1668355833995 .node-icon-6{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-6{stroke-width:-4;}#mermaid-1668355833995 .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-7 rect,#mermaid-1668355833995 .section-7 path,#mermaid-1668355833995 .section-7 circle,#mermaid-1668355833995 .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-7 text{fill:black;}#mermaid-1668355833995 .node-icon-7{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-7{stroke-width:-7;}#mermaid-1668355833995 .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-8 rect,#mermaid-1668355833995 .section-8 path,#mermaid-1668355833995 .section-8 circle,#mermaid-1668355833995 .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-8 text{fill:black;}#mermaid-1668355833995 .node-icon-8{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-8{stroke-width:-10;}#mermaid-1668355833995 .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-9 rect,#mermaid-1668355833995 .section-9 path,#mermaid-1668355833995 .section-9 circle,#mermaid-1668355833995 .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-9 text{fill:black;}#mermaid-1668355833995 .node-icon-9{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-9{stroke-width:-13;}#mermaid-1668355833995 .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-10 rect,#mermaid-1668355833995 .section-10 path,#mermaid-1668355833995 .section-10 circle,#mermaid-1668355833995 .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-10 text{fill:black;}#mermaid-1668355833995 .node-icon-10{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-10{stroke-width:-16;}#mermaid-1668355833995 .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-root rect,#mermaid-1668355833995 .section-root path,#mermaid-1668355833995 .section-root circle{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-1668355833995 .section-root text{fill:#ffffff;}#mermaid-1668355833995 .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-1668355833995 .edge{fill:none;}#mermaid-1668355833995 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g
---
>   >#mermaid-1668355833995 {font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1668355833995 .error-icon{fill:#552222;}#mermaid-1668355833995 .error-text{fill:#552222;stroke:#552222;}#mermaid-1668355833995 .edge-thickness-normal{stroke-width:2px;}#mermaid-1668355833995 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1668355833995 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1668355833995 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1668355833995 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1668355833995 .marker{fill:#333333;stroke:#333333;}#mermaid-1668355833995 .marker.cross{stroke:#333333;}#mermaid-1668355833995 svg{font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;font-size:16px;}#mermaid-1668355833995 .edge{stroke-width:3;}#mermaid-1668355833995 .section--1 rect,#mermaid-1668355833995 .section--1 path,#mermaid-1668355833995 .section--1 circle,#mermaid-1668355833995 .section--1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-1668355833995 .section--1 text{fill:#ffffff;}#mermaid-1668355833995 .node-icon--1{font-size:40px;color:#ffffff;}#mermaid-1668355833995 .section-edge--1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth--1{stroke-width:17;}#mermaid-1668355833995 .section--1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-0 rect,#mermaid-1668355833995 .section-0 path,#mermaid-1668355833995 .section-0 circle,#mermaid-1668355833995 .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-1668355833995 .section-0 text{fill:black;}#mermaid-1668355833995 .node-icon-0{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-1668355833995 .edge-depth-0{stroke-width:14;}#mermaid-1668355833995 .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-1 rect,#mermaid-1668355833995 .section-1 path,#mermaid-1668355833995 .section-1 circle,#mermaid-1668355833995 .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-1 text{fill:black;}#mermaid-1668355833995 .node-icon-1{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-1{stroke-width:11;}#mermaid-1668355833995 .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-2 rect,#mermaid-1668355833995 .section-2 path,#mermaid-1668355833995 .section-2 circle,#mermaid-1668355833995 .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-2 text{fill:#ffffff;}#mermaid-1668355833995 .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-1668355833995 .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-2{stroke-width:8;}#mermaid-1668355833995 .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-3 rect,#mermaid-1668355833995 .section-3 path,#mermaid-1668355833995 .section-3 circle,#mermaid-1668355833995 .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-3 text{fill:black;}#mermaid-1668355833995 .node-icon-3{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-3{stroke-width:5;}#mermaid-1668355833995 .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-4 rect,#mermaid-1668355833995 .section-4 path,#mermaid-1668355833995 .section-4 circle,#mermaid-1668355833995 .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-4 text{fill:black;}#mermaid-1668355833995 .node-icon-4{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-4{stroke-width:2;}#mermaid-1668355833995 .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-5 rect,#mermaid-1668355833995 .section-5 path,#mermaid-1668355833995 .section-5 circle,#mermaid-1668355833995 .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-5 text{fill:black;}#mermaid-1668355833995 .node-icon-5{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-5{stroke-width:-1;}#mermaid-1668355833995 .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-6 rect,#mermaid-1668355833995 .section-6 path,#mermaid-1668355833995 .section-6 circle,#mermaid-1668355833995 .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-6 text{fill:black;}#mermaid-1668355833995 .node-icon-6{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-6{stroke-width:-4;}#mermaid-1668355833995 .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-7 rect,#mermaid-1668355833995 .section-7 path,#mermaid-1668355833995 .section-7 circle,#mermaid-1668355833995 .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-7 text{fill:black;}#mermaid-1668355833995 .node-icon-7{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-7{stroke-width:-7;}#mermaid-1668355833995 .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-8 rect,#mermaid-1668355833995 .section-8 path,#mermaid-1668355833995 .section-8 circle,#mermaid-1668355833995 .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-8 text{fill:black;}#mermaid-1668355833995 .node-icon-8{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-8{stroke-width:-10;}#mermaid-1668355833995 .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-9 rect,#mermaid-1668355833995 .section-9 path,#mermaid-1668355833995 .section-9 circle,#mermaid-1668355833995 .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-9 text{fill:black;}#mermaid-1668355833995 .node-icon-9{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-9{stroke-width:-13;}#mermaid-1668355833995 .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-10 rect,#mermaid-1668355833995 .section-10 path,#mermaid-1668355833995 .section-10 circle,#mermaid-1668355833995 .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-1668355833995 .section-10 text{fill:black;}#mermaid-1668355833995 .node-icon-10{font-size:40px;color:black;}#mermaid-1668355833995 .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-1668355833995 .edge-depth-10{stroke-width:-16;}#mermaid-1668355833995 .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-1668355833995 .disabled,#mermaid-1668355833995 .disabled circle,#mermaid-1668355833995 .disabled text{fill:lightgray;}#mermaid-1668355833995 .disabled text{fill:#efefef;}#mermaid-1668355833995 .section-root rect,#mermaid-1668355833995 .section-root path,#mermaid-1668355833995 .section-root circle{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-1668355833995 .section-root text{fill:#ffffff;}#mermaid-1668355833995 .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-1668355833995 .edge{fill:none;}#mermaid-1668355833995 :root{--mermaid-font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;}</style><g
57a58
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
69a71
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
87a90
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
105a109
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
120a125
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
138a144
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
156a163
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
169a177
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
187a196
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
205a215
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
226a237
>           svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"
Fuzzyma commented 10 months ago

@aloisklink the newest master has a workaround that does not write data to the dom if it is the default anyway. Try it out if you like. Next step is to deprecate svgjs:data alltogether and use a data attribute instead

Fuzzyma commented 10 months ago

done: https://github.com/svgdotjs/svg.js/commit/ca8ac554bfafe6b4d7985fe3130ff3dffa6029ca