DevOps, CI/CD and Automation

Hello everyone,

I'm having trouble filling my gantt chart bars with an svg pattern. To demonstrate, I'm using the "Customize

Task Bars" cookbook example as a base: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=gantt&demo=customBars

First, I'll add this SVG pattern to the "componentDemoContent" div:

1. <svg height="0" width="0">

2.    \<defs>  
   

3.      \<linearGradient id="gradient" x1="0%"  y1="100%"\>  
   

4.        \<stop offset="0%" style="stop-color: #66ccff"\>\</stop>  
   

5.        \<stop offset="80%" style="stop-color: #0000FF"\>\</stop>  
   

6.        \</linearGradient>  
   

7.      \<pattern id="pattern"   
   

8.        width="6" height="6"   
   

9.        patternUnits="userSpaceOnUse"  
   

10.        patternTransform="rotate(45)"\>  
    

11.        \<rect width="6" height="6" transform="translate(0,0)" fill="#336791"\>\</rect>  
    

12.        \<rect x="3" width="6" height="6" transform="translate(0,0)" fill="#C53333" >\</rect>  
    

13.      \</pattern>  
    

14.    \</defs>  
    

15.  \</svg>
    

Source and possibly related:

Next, I'll change one of the style-classes in the CSS to use that pattern:

.demo-gantt-task-hold2 {

fill: url([#pattern](https://forums.oracle.com/ords/apexds/domain/dev-community?tags=pattern));

}

This will work as desired:

However, if we now create our own class:

.tst {

fill: url([#pattern](https://forums.oracle.com/ords/apexds/domain/dev-community?tags=pattern));

}

And apply the style to all tasks in the JS (added "tst" in line 2):

this.getSvgClassName = function(taskType) {

      var svgClassName = 'demo-gantt-task tst';

      switch (taskType) {

        case 'hold1':

          svgClassName += ' demo-gantt-task-hold1';

          break;

        case 'hold2':

          svgClassName += ' demo-gantt-task-hold2';

          break;

        case 'calendar':

          svgClassName += ' demo-gantt-task-calendar';

          break;

      }

      return svgClassName;

    };

I get the following error in console:

Uncaught (in promise) TypeError: Cannot read property 'toLowerCase' of null

at Object.e.ColorUtils.getColorFromName (ojdvtbasebundle.js:6)

at e.ColorUtils.\_getChannel (ojdvtbasebundle.js:6)

at Object.e.ColorUtils.getLuminance (ojdvtbasebundle.js:6)

at Object.e.ColorUtils.getContrastingTextColor (ojdvtbasebundle.js:6)

at a (DvtGantt.js:9)

at n.preAnimateTaskLabel (DvtGantt.js:9)

at f.render (DvtGantt.js:9)

at u.render (DvtGantt.js:9)

at i.\_renderRowObj (DvtGantt.js:9)

at i.renderViewport (DvtGantt.js:9)

Which is exactly what I get in the project I'm working on.

Any help would be greatly appreciated.

P.S.: I'm testing on JET v7.2.0. Also, setting the style class manually in the browser, after the chart populates with the tasks, works.