Marker is not included(arrow)

[hcooch2ch3]

I don't know why marker(arrow) is not included to file..

including marker is not imlplemented yet?

or is this my problem?

Use case: description, code

jsfiddle

Expected behavior (Captured by windows tool)

Actual behavior (Captured by dom-to-image)

Library version

Latest

Browsers

Chrome

• [ ] Chrome 49+
• [ ] Firefox 45+

[tsayen]

Hi, unfortunately, you haven't provided any code example, I have no idea what's going on. The link ti jsfiddle is to the default one

[zeb600]

While I'm not the OP I might be of help here since I just ran into the same problem.

Here's the SVGs code:

`

    <circle id="circle_2" cx="183" cy="189" r="25" fill="transparent" stroke="#43bfe3" stroke-width="5"></circle>
    <circle id="circle_5" cx="185" cy="429" r="25" fill="transparent" stroke="#43bfe3" stroke-width="5"></circle>
    <circle id="circle_10" cx="569" cy="253" r="25" fill="transparent" stroke="#43bfe3" stroke-width="5"></circle>
    <line id="line_2-5" class="hasArrow" stroke="#43bfe3" stroke-width="5" marker-end="url('#triangle')" x1="183.20207631691636" y1="213.24915802996347" x2="184.52501649219658" y2="372.001979063591"></line>
    <line id="line_5-10" class="hasArrow" stroke="#43bfe3" stroke-width="5" marker-end="url('#triangle')" x1="207.0448219551864" y1="418.8961232705396" x2="517.1833050950258" y2="276.74931849811315"></line>
    <line id="line_10-goooal" class="hasArrow" stroke="#43bfe3" stroke-width="5" marker-end="url('#triangle')" x1="593.2310581576829" y1="253.95829043561457" x2="689.0445230932814" y2="257.7475235121637"></line>
</svg>`

For some reason that svg code doesn't render that pretty here so here's the relevant parts: Using defs->marker:

`

    </defs>` 

Use that marker (arrowhead) on the line:

<line id="line_2-5" class="hasArrow" stroke="#43bfe3" stroke-width="5" marker-end="url('#triangle')" x1="183.20207631691636" y1="213.24915802996347" x2="184.52501649219658" y2="372.001979063591"></line>

The marker-end property is not being rendered to PNG in current chrome, but it works fine in current firefox.

Actual SVG looks like that:

Result using

`let node = document.getElementById('spielfeldGraphics'); // that's the parent node

            domtoimage.toPng(node, {width: 800, height: 500})
                .then(function (dataUrl) {
                    let img = new Image();
                    img.src = dataUrl;
                    document.body.appendChild(img);
                })
                .catch(function (error) {
                    console.error('oops, something went wrong!', error);
                });`

in Chrome:

[candu]

+1 - also running into this problem with latest dom-to-image.

Haven't dug into it extensively, but I suspect this might be an issue with loading markers defined in <defs> - perhaps the url() values for marker-end aren't detected properly?

[derek-knox]

@candu @zeb600 @hcooch2ch3 FWIW I made a fork https://github.com/derek-knox/dom-to-image that accounts for <defs> and <use>. Basically, when dom-to-image is cloning nodes, shadow nodes are not cloned. I'd build it out and make a PR, but it's been over a year since a PR seems to have been merged.

Was:

function cloneChildren(original, clone, filter) {
    var children = original.childNodes;

Now:

function cloneChildren(original, clone, filter) {
    var children = original.tagName === 'use' ? copyShadowChild(original) : original.childNodes;

...

function copyShadowChild(original) {
    var child = document.getElementById(original.href.baseVal.replace('#', ''));
    return [child.cloneNode(true)];
}

[dwdonline]

I am havin a similar issue. It is not reading the background that is defined in the defs>pattern tag.

I tried using your version @derek-knox - but still nothing.

[InYourHead]

I found why marker is not included on chrome.

Wrong behaviour:

https://jsfiddle.net/InYourHead/7e0u2z9y/2/

Example (you need to remove marker: none; from <line> style attribute:

https://jsfiddle.net/InYourHead/bkuvc2nm/1/

[codytodonnell]

@dwdonline did you ever find a solution or workaround? I cannot find a way to get fills to show up for svg elements that reference a pattern in their fill attribute.

[InYourHead]

@codytodonnell see my fork - i made an ugly fix for it (you can for example remove "cursed" attribute before loop to make it more optimal)

[stevenpeh]

Just to add I was having same issues and using @InYourHead fork, but still wasn't working. Turns out I was using polyline and his fork was fixing for "line" objects only on Chrome. Since I only use polyline, easy fix for me was to quickly update his code from "line" to "polyline".

Great work @InYourHead ... now if only a proper fix can be merged into the project... 2 years and still no fix..

[thien-do]

Hm look like things change now. Firefox and Chrome have no problem rendering my markers, while Chromium Edge and Safari do.

I'm not sure about the process of rendering PNG, so I checked the SVG file (because I think the PNG will base on the SVG?) then I see that:

• In Firefox and Chrome, my marker references are kept as is (e.g. marker-end: url("#foo"))
• In Safari and Chromium Edge, my marker references have "#" removed (e.g. marker-end: url("foo"))

Anyone know how to workaround this issue?

[thien-do]

@InYourHead I workaround your issue by defining the marker inside CSS (instead of as attribute). However I still can't get it to work because losing of the "#" part

[thien-do]

Ok update: turn out (at least in my case) it's because Safari's getPropertyValue returns value without the "#" character

[InYourHead]

@dvkndn feel free to create PR with your fix for safari and chromium ende. You can paste link here, to allow fixes in other forks

[thien-do]

@InYourHead I'll try to make a generic fix :D btw I filed a bug in webkit https://bugs.webkit.org/show_bug.cgi?id=215409