Sequence flow arrow is not shown

I have used bpmn-js modeler in my web app, but for an unknown reason the arrow of the sequence flow is not shown. Is it related to CSS styles, or JS logic, or lack of some files import? here is an screenshot:


bpmn-js uses marker elements for arrowheads. Your browser may not support them. What Browser do you use?

Thanks for your response. I use the latest versions of chromium and firefox, but I believe that this problem is not related to browser version, because I run bpmn-js-examples without any problem.

You must not use the <base href /> tag together with SVG markers.

Probably that’s what you are doing.

1 Like

As @nikku said, my problem was the <base> tag. The actual problem is that <path> tag uses url("#someHash") in it’s styles, and adding <base> tag to the page changes the way url("#someHash") works.
Removing <base> tag solves the problem, but in my case it cannot be removed, beacase html5Mode in AngularJS requires that.

My final workaround for this problem was changing all urls in <path> tag to use absolute urls like url("pageAbsoluteUrl#someHash"). Here is the code:

  var modeler = new window.BpmnJS(/*options*/);
  // do some logic
  modeler.on('commandStack.changed', function () {
    $('path').each(function (e) {
      var path = $(this);
      var style = path.attr('style');
      if (style) {
        path.attr('style', style.replace(/url\("#/g, 'url("' + location.href + '#'));