fiduswriter / diffDOM

A diff for DOM elements, as client-side JavaScript code. Gets all modifications, insertions and removals between two DOM fragments.
GNU Lesser General Public License v3.0
816 stars 103 forks source link

warnings from `diff-dom` regarding calc values in svg #134

Open phun-ky opened 11 months ago

phun-ky commented 11 months ago

I'm getting these warnings in my console from diff-dom:

image

Due to this svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><mask id="a"><rect width="100%" height="100%" fill="#fff"></rect><circle cx="50%" cy="50%" r="127"></circle></mask></defs><circle cx="calc(50% + 35px)" cy="calc(50% - 35px)" r="calc(125px + 65px)" fill="rgba(151, 70, 163, 0.5)" mask="url(#a)"></circle><circle cx="calc(50% + -0px)" cy="calc(50% - 50px)" r="calc(125px + 65px)" fill="rgba(0,81,154,0.5)" mask="url(#a)"></circle><circle cx="calc(50% + -35px)" cy="calc(50% - 35px)" r="calc(125px + 65px)" fill="rgba(0,151,208,0.5)" mask="url(#a)"></circle><circle cx="calc(50% + -50px)" cy="calc(50% + 0px)" r="calc(125px + 65px)" fill="rgba(0, 146, 65, 0.5)" mask="url(#a)"></circle><circle cx="calc(50% + -35px)" cy="calc(50% + 35px)" r="calc(125px + 65px)" fill="rgba(244,212,3,0.5)" mask="url(#a)"></circle><circle cx="calc(50% + 0px)" cy="calc(50% + 50px)" r="calc(125px + 65px)" fill="rgba(224,108,25,0.5)" mask="url(#a)"></circle><circle cx="calc(50% + 35px)" cy="calc(50% + 35px)" r="calc(125px + 65px)" fill="rgba(203,24,30,0.5)" mask="url(#a)"></circle><circle cx="calc(50% + 50px)" cy="calc(50% + 0px)" r="calc(125px + 65px)" fill="rgba(219, 112, 147, 0.5)" mask="url(#a)"></circle><circle cx="50%" cy="50%" r="125" fill="#fff" mask="url(#a)"></circle></svg>

You can see it on https://moebius.wtf

johanneswilm commented 7 months ago

@phun-ky Can you explain a bit how this is related to diff-dom? Isn't it just the browser complaining about unusual attribute values?