Skip to content

SVG paths that use CSS for coloring aren't showing in PDF export #3278

Open
@kirkjerk

Description

@kirkjerk

Description

I'm trying to export ReactFlow diagrams via KendoPDF. In general it seemed to work well except the "edges" (lines between nodes) weren't showing.

See xyflow/xyflow#5397 for my investigation.... my conclusion was KendoPDF was ignoring the classNames, and so the stroke and strokeWeight wasn't being set.

I would say this is a bug? or is there a way to get Kendo to think about the CSS environment, some answer beside "make sure all your SVGs don't rely on CSS" which in this case we don't seem to have options to adjust.

Plan

KendoReact

Steps To Reproduce

wrap an svg depending on CSS for display in a Kendo tag, and trigger the export method

https://stackblitz.com/edit/react-flow-kendo-pdf-svg?file=src%2FApp.tsx
this is a crude kludge demo but it gets the idea across;
below is the basic ReactFlow I used to help generate the other parts. I then manually copied the relevant svg / path to 2 instances of inline SVGs; one using CSS (I did the hack of doubling the selector in index.css to .react-flow__edge-path.react-flow__edge-path to override the reactflow default)

the first clone uses the same CSS based approach and displays ok on screen but both the rendered ReactFlow and the clone don't show on export when you click the button
the second manually sets stroke and strokeWidth inline, and displays more or less ok (scaling is wrong but there's so many other shenanigans)

Screenshots or video

No response

Actual Behavior

SVG paths with inline stroke information show; SVG paths with CSS stroke definitions do not

Expected Behavior

All SVGs show

Browser

Chrome

Browser version

latest

OS type

MacOS

OS version

No response

Last working version of the KendoReact package (if regression).

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions