Android 2.3.x 与谷歌图表

Question

在我的应用程序中，我使用了 Google 图表。
问题是Android 2.3.x 浏览器不支持svg。
我收到下一个错误:无法设置 null 属性“溢出”

经过一些研究，我发现了这个 question引用canvg

我的代码:

<div id="Wrapper">      
        <div id="titlewrapper"><div id="title" class="rounded-corners">qwertyuiopasdfghjklzxcvbnm</div></div>
        <div id="chart_div" style="position: relative;">
            <div dir="ltr" style="position: relative; width: 1584px; height: 531px;">
                <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                    <svg width="1584" height="531" style="overflow: hidden;">
                        // SVG CONTENT
                    </svg>
                </div>
            </div>
        </div>
    </div>

Google 图表代码添加到 #chart_div 中。
我的问题是如何使用 canvg 或任何其他工具来支持 Android 2.3.x 浏览器中的图表？

- 编辑: 我想使用:

//load '../path/to/your.svg' in the canvas with id = 'canvas'
  canvg('canvas', '../path/to/your.svg')

如何获取对该 SVG 的引用？

Answer 1

如果您使用的 canvg 库与我想到的相同，我相信您可以传递对 <svg> 的引用。 DOM 中的元素到 canvg功能:

var svg = document.querySelector('#chart_div svg');
canvg('canvas', svg);

您可能希望将其放入正在绘制的任何图表的“就绪”事件处理程序中:

google.visualization.events.addListener(chart, 'ready', function () {
    var svg = document.querySelector('#chart_div svg');
    canvg('canvas', svg);
});

但是，只有当 SVG 实际写入 DOM 时，这才有效。我不知道 Android 2.3.x 浏览器是否真的允许将无效的 svg 元素写入 DOM。