Adding svg patterns to highcharts

Question

For accessibility I want to add some svg patterns into highcharts. There's a plugin to do it with png but I want to use svg to be resolution agnostic. I've run into some difficulty implementing this. As a test I've injected a pattern into the charts svg tag. I've added an id to easily target each column's tag. though when I add the pattern I get a blank column.

// custom colors
var customColors = new Object();
    customColors.red = "#cc0000"; 
    customColors.navy = "#2c53a0";
    customColors.orange = "#e3580b";
    customColors.gold = "#cc8900";
    customColors.green = "#4e9345";
    customColors.teal = "#44b9be";
    customColors.cyan = "#8ed1e4";
    customColors.purple = "#8a4593";
    customColors.grey = "#68737a";
    customColors.blue = "#2895d2";



$(function () {

    // Code snippet for adding a HTML table representation of the chart data 
    Highcharts.Chart.prototype.callbacks.push(function (chart) {

        var div = document.createElement('div'),
            ariaTable;

        chart.container.parentNode.appendChild(div);
        div.innerHTML = chart.getTable();
        ariaTable = div.getElementsByTagName('table')[0];

        // Set ARIA attributes
        chart.renderTo.setAttribute('aria-label', 'A chart. ' + chart.options.title.text + '. ' + chart.options.subtitle.text);
        chart.container.setAttribute('aria-hidden', true);
        div.setAttribute('aria-label', 'A tabular view of the data in the chart.');
        div.style.position = 'absolute';
        div.style.left = '-9999em';
        div.style.width = '1px';
        div.style.height = '1px';
        div.style.overflow = 'hidden';
    });

    $('#container').highcharts({

        title: {
            text: 'Accessible Highcharts'
        },
       legend: {
         enabled: false,
       },

        subtitle: {
            text: 'A hidden but machine readable HTML table contains this chart\'s data'
        },

        xAxis: {
           title: {
             text: "Characters",
                enabled: "middle",
             style: {
            "fontSize": "15px",
               color: "#000000"
          }
            },

            categories: ['Mickey', 'Donald', 'Goofy', 'Pluto', 'Daisy', 'Minie']

        },

      yAxis: {
            title: {
                text: 'Popularity',
              style: {
            fontSize: "15px",
               color: "#000000"
          }
            },

      },

        series: [{
          type: 'column',
          name: 'Character Popularity',
            data: [
              {
                name: 'Mickey',
                color: customColors.red,
                y: 100
              },
              {
                name: 'Donald',
                color: customColors.navy,
                y: 75
              },
              {
                name: 'Goofy',
                color: customColors.green,
                y: 10
              },
              {
                name: 'Pluto',
                color: customColors.gold,
                y: 20
              },
              {
                name: 'Minie',
                color: customColors.purple,
                y: 30
              },
              {
                name: 'Daisy',
                color: customColors.orange,
                y: 5
              }
            ]
        }]
    });

//inject pattern into svg
   $(".highcharts-container svg defs").prepend('<pattern id="pattern1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" ><circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" /><circle cx="30" cy="30" r="30" style="stroke: none; fill: green" /></pattern>');

// Add id to chart svg rect 
   $(".highcharts-series rect").attr( "id", function(i) {
    return "rect-id" + (i+1);
   });

//remove fill add pattern  
  $("#rect-id1").removeAttr("fill").attr("style","fill: url(#pattern1)");

  });

You can see the pen here: http://codepen.io/sharperwebdev/pen/rOmyxE

Any guidance would be greatly welcomed.