Arrows Not Working

[streamich]

There is at least one case when arrows don't work, similar to #78.

This looks to be Raphael issue, the cause is <base/> tag in HTML document's header.

In SVG arrows (markers) are drawn in background like background: url(#marker-bla-bla-bla);, which references another element where the marker is defined <a href="#marker-bla-bla-bla" ....

If <base/> tag is used, this messes up the the background URL reference by fragment.

[streamich]

What's the easiest hack, to be able to use <base/> tag AND js-sequence-diagrams on one page?

[streamich]

Here is my quick and dirty fix:

$el.sequenceDiagram({theme: 'simple'});
var $path = $el.find("path");
if($path.length) {
    $path.each(function(i, el) {
        var $el = $(el);
        var attr = $el.attr("marker-end");
        if(attr) {
            $el.attr("marker-end", "url(" + window.location.href + attr.substr(4));
        }
    });
}

[streamich]

Actually, previous solution worked in Chrome, but did not work in Firefox.

Anyways, here is a better solution, that should work in all browsers:

$el.sequenceDiagram({theme: 'simple'});
var url = "data:image/svg+xml;utf8," + encodeURIComponent($el.html());
$el.html("").append($("<img>").attr("src", url));