Create SVG defs for a shape

Developers
1

Hi All,
Is it possible to create defs in the svg, (I suppose tiny svg needs to support it)? Basically wanted a add glow around a svg shape? Is that possible? Any examples?

Thanks and Regards
Rajender

2

Tiny SVG is just a wrapper for SVG. You may create definitions using vanilla DOM API, too.

BpmnRenderer is the place where we create <defs> ourselves. Maybe you find it useful.

3

I solved the above problem by adding a custom module, which modifies <defs> section after diagram import. It uses only min-dom and tiny-svg helpers.

var svgAppend = require('tiny-svg/lib/append'),
    svgAttr = require('tiny-svg/lib/attr'),
    svgCreate = require('tiny-svg/lib/create'),
    svgClasses = require('tiny-svg/lib/classes');

var domQuery = require('min-dom/lib/query');

// Add SVG shadow filter after diagram import

function ShadowSvgFilter(eventBus, canvas) {
  eventBus.on('import.done', function(event) {
    if (event.error) return;

    // Similar to bpmn-js/lib/draw/BpmnRenderer.js (AddMarker function)
    var defs = domQuery('defs', canvas._svg);
    if (!defs) {
      defs = svgCreate('defs');
      svgAppend(canvas._svg, defs);
    }
    var shadowFilter = svgCreate('filter');
    svgAttr(shadowFilter, {
      id: 'svg-bpmn-shadow'
    });
    svgAppend(defs, shadowFilter);

    var feGaussianBlur = svgCreate('feGaussianBlur');
    svgAttr(feGaussianBlur, {
      in: 'SourceAlpha',
      stdDeviation: 3
    });
    svgAppend(shadowFilter, feGaussianBlur);

    var feOffset = svgCreate('feOffset');
    svgAttr(feOffset, {
      dx: 3,
      dy: 3
    });
    svgAppend(shadowFilter, feOffset);

    var feComponentTransfer = svgCreate('feComponentTransfer');
    svgAppend(shadowFilter, feComponentTransfer);

    var feFuncA = svgCreate('feFuncA');
    svgAttr(feFuncA, {
      type: 'linear',
      slope: 0.6
    });
    svgAppend(feComponentTransfer, feFuncA);

    var feMerge = svgCreate('feMerge');
    svgAppend(shadowFilter, feMerge);

    var feMergeNode1 = svgCreate('feMergeNode');
    svgAppend(feMerge, feMergeNode1);

    var feMergeNode2 = svgCreate('feMergeNode');
    svgAttr(feMergeNode2, {
      in: 'SourceGraphic'
    });
    svgAppend(feMerge, feMergeNode2);
  });
}

ShadowSvgFilter.$inject = ['eventBus', 'canvas'];

module.exports = ShadowSvgFilter;

But there are some rendering issues in Firefox. I use several instances of bpmn-js in tabbed component and shapes with shadows can disappear on switching tabs. But they reappear on any diagram zoom or scroll, such as:

bpmnJS.get('canvas').scroll({dx: 0, dy: 0});
1 Like
5