Search code examples
svgraphaeldraw2d-js

Fill a path node in Draw2d touch

Im trying to make an arrow joining a rect and a path (triangle). This is my code:

var svgCarga = [
  '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',
  '<rect opacity="0" height="50" width="50" y="0" x="0" stroke-width="0" stroke="#000" fill="#fff"/>',
  '<rect stroke="#000" height="29.875" width="4" y="6.3125" x="23" stroke-width="0" fill="#000000"/>',
  '<path fill="#000000" stroke="#000" d="m17.41375,36.090939l7.4375,10l7.4375,-10l-14.875,0z" stroke-width="1"/>',
  '</svg>',
].join();


Carga = draw2d.SVGFigure.extend({
  NAME: 'Carga',
  init: function() {
    this._super();
    this.width = 65;
    this.height = 65;
  },
  getSVG: function() {
    return svgCarga;
  }
});

As you can see, the path has an attribute: fill="#000000" but when is rendered shows fill="none"... if i change this attribute manually, shows the path filled.

Debugger View

Solution

  • i don't know what do you want to do exactly.

    I think you can't fill an SVG Path in Draw2D for now (keep in mind that the SVGFigure import is currently very limited)

    '<path fill="#000000" stroke="#000" d="m17.41375,36.090939l7.4375,10l7.4375,-10l-14.875,0z" stroke-width="1"/>'

    You can use polygon to do that, like this:

    '<polygon points="25,45 15,35 35,35" fill="#000000" stroke="#000" stroke-width="1" />'

    Hope it's what you want :)

    Reference:

    http://draw2d.org/draw2d_touch/jsdoc_5/#!/guide/extending_svg_figure