javascript - svg兼容低版本浏览器,要怎么做?
PHPz
PHPz 2017-04-17 15:17:56
0
0
423

现有一个圆环,因需要动态效果,故用了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这个方法报错)

PHPz
PHPz

学习是最好的投资!

reply all(0)
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template