我正在尝试向AreaChart添加遮罩，并且发现只有在Google Charts API生成的svg文档的<defs>部分中定义了创建的遮罩时，才应用（并显示）创建的遮罩。我为“就绪”事件创建了一个EventListener，将<mask>追加到<defs>，但没有成功。

最奇怪的是，当我使用Firefox网站站长工具检查<mask>并在浏览器中以HTML格式编辑<svg>时，可以看到附加的<defs>，例如：在任何标签或属性之间添加额外的空间）并保存-该掩码应用于我的图表的路径，但是我不明白为什么在API绘制图表时不应用该掩码。

以下是一些代码：

google.visualization.events.addListener(chart,'ready',function () {
    var mask = chart_placeholer.querySelector('defs > mask#mask-stripe');

    if(!mask) {
        mask = document.createElement('mask');
        mask.setattribute('id','mask-stripe');

        // Note: there is no difference whether I create `<rect>` using createElement
        // and append,or create it with innerHTML — result is always the same.

        mask.innerHTML = '<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)"/>';
        chart_placeholer.getElementsByTagName('defs')[0].appendChild(mask);
     }
}

我也有更改fill的属性mask和<path>的代码，并且工作正常，因此无需在此处放置该代码。问题在于，mask仅在我使用HTML Inspector找到掩码的定义，进行一些不相关的更改并保存后才应用于路径。