svg兼容低版本浏览器，要怎么做？

Question

现有一个圆环，因需要动态效果，故用了svg

<svg width="162" height="162" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#8623a9" />
            <stop offset="100%" stop-color="#4916c1" />
        </linearGradient>
    </defs>
    <circle id="round" r="69" cy="81" cx="81" stroke-width="22" stroke="url(#linear)" fill="none" stroke-dasharray="0%"></circle>
</svg>

页面加载完成后 js控制stroke-dasharray这个属性的值，做动态效果

低版本浏览器可以用图片代替，解决方法为：

<object data="datashow/round.svg" type="image/svg+xml" id="object">
     <img src="datashow/data5.png">
</object>

现出现问题：单独引用svg之后，动态效果没有了，是因为js访问不到object中的svg。

求解决方法
（ps:document.getElementById('object').contentDocument这个方法报错）

Answer 1

要使用 JS 操作 SVG 的话首要前提是直接将 SVG 内联写入到 HTML 中，使用 img 和 object, embed 标签方式引入的话是无法获取 SVG 内部的元素的。

关于 SVG 的兼容可以参考张鑫旭老师13年的文章：http://www.zhangxinxu.com/wor... 总结下来就是在 SVG 内部使用一个 <image src="图片地址" /> 即可。