tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.21k stars 1.68k forks source link

svg element not rendered #333

Open gr8code2be opened 4 years ago

gr8code2be commented 4 years ago

Use case: description, code

<div  #content id="content">
    <svg
        class="edges"
        width="100%"
        height="100%"
        [ngStyle]="transformStyle()"
    >
        <svg:g
            *ngIf="cablePullService.isActive"
            app-my-connection
            [source]="cablePullService.source"
            [destination]="cablePullService.destination"
        >
        </svg:g>
        <svg:g
            *ngFor="let connection of all.connections"
            app-my-connection
            [source]="(connection.metadata)?.referenceSource || connection.source"
            [destination]="(connection.metadata)?.referenceDestination || connection.destination"
        >
        </svg:g>
    </svg>
    <div
        class="processes"
        [ngStyle]="transformStyle()"
    >
        <app-my-port
            class="readonly-vig"
            *ngFor="let inport of all.inports"
            [disabled]="readonly"
            [appGraphNode]="inport"
            [disableDrag]="readonly"
            [position]="{ x: inport.metadata.x, y: inport.metadata.y }"
            [direction]="'out'"
            [port]="inport"
        >
        </app-my-port>
        <app-my-port
            class="port"
            *ngFor="let outport of all.outports"
            [disabled]="readonly"
            [appImg]="outport"
            [position]="{ x: outport.metadata.x, y: outport.metadata.y }"
            [disableDrag]="readonly"
            [direction]="'in'"
            [port]="outport"
        >
       .
       .
       .

.ts file:

            function filter (node) {
                return (node.tagName !== 'i');
            }
            domtoimage.toSvg(document.getElementById('content'), {filter: filter})
                .then(function (dataUrl) {
                 var img = new Image();
                 img.src = dataUrl;
                document.body.appendChild(img);

                });

Expected behavior

to see all svg elements being rendered in the image

Actual behavior (stack traces, console logs etc)

no svg element is rendered

Library version

2.6.0

Browsers

chrome 81.0.4044.138