score:1

Accepted answer

The <defs> element only defines this pattern, it doesn't actually cause it to be rendered anywhere. Artifacts defined in a defs need to be referenced by other visible elements.

In order to reference a definition you need to give it a unique id. (Note that the defs can live anywhere in the SVG and can be referenced by any other element or elements).

rectCanvas_o.append("defs").append("pattern").attr("id", "my_pattern");

Then, you need to set the fill attribute of your rect to reference your defined pattern:

rectCanvas_o = parentElement.append("rect")
    .attr("width", "30")
    .attr("height","100%").
    .attr("class", this.currentAlarmClass_s)
    .style("fill", "url(#my_pattern)");

Related Query

More Query from same tag