-
Notifications
You must be signed in to change notification settings - Fork 638
Description
Hi!
I make diagram in web-version draw.io. I add properties for rect (by right click), for example (mydata="something"), and save to SVG.
Next, I add this SVG on web page (Next.JS client component) and add listening events - onMouseClick in JS. I get element by click (event.target) - this is my rect. But it has not element mydata. Why?
"use client";
export default function Roadmapper({ svg }: { svg: string }) {
const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
console.log(event.target);
};
return (
<>
<div
style={{ width: "100%", height: "100%" }}
onClick={handleClick}
dangerouslySetInnerHTML={{ __html: svg }}
/>
</>
);
}
How to set my data for element in draw.io to get it in web-page in JS?
in console I get:
<rect x="0" y="80" width="120" height="60" rx="9" ry="9" fill="url(#drawio-svg-VJUeQuwQImHvvxXrS3Zj-gradient-light-dark_fff2cc_281d00_-1-light-dark_ff9933_a95100_-1-s-0)" stroke="#d6b656" pointer-events="all" style="fill: url("#drawio-svg-VJUeQuwQImHvvxXrS3Zj-gradient-light-dark_fff2cc_281d00_-1-light-dark_ff9933_a95100_-1-s-0"); stroke: light-dark(rgb(214, 182, 86), rgb(109, 81, 0));"></rect>
Thank you!