VİVUS JS KULLANIMI ?

Merhabalar aranızda hiç vivus.js kullanan oldu mu ? svg bir çizim yapıyorum. onu [link=https://maxwellito.github.io/vivus-instant/][/link] bu belirttiğim yere atıp export ettikten sonra html deki svg kısmına css i ile birlikte gömüyorum. fakat benim yaptıklarım ie ve safaride çalışmıyor ? :/ neyi eksik yapıyorum bulamadım. bir bakabilir misiniz?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.2/vivus.js"></script>

<style type="text/css">
.gpBkVCyh_0 {
stroke-dasharray: 763 765;
stroke-dashoffset: 764;
animation: gpBkVCyh_draw_0 4200ms linear 0ms infinite, gpBkVCyh_fade 4200ms linear 0ms infinite;
}
.gpBkVCyh_1 {
stroke-dasharray: 1077 1079;
stroke-dashoffset: 1078;
animation: gpBkVCyh_draw_1 4200ms linear 0ms infinite, gpBkVCyh_fade 4200ms linear 0ms infinite;
}
@keyframes gpBkVCyh_draw {
100% {
stroke-dashoffset: 0;
}
}
@keyframes gpBkVCyh_fade {
0% {
stroke-opacity: 1;
}
90.47619047619048% {
stroke-opacity: 1;
}
100% {
stroke-opacity: 0;
}
}
@keyframes gpBkVCyh_draw_0 {
0% {
stroke-dashoffset: 764
}
42.857142857142854% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes gpBkVCyh_draw_1 {
0% {
stroke-dashoffset: 1078
}
42.857142857142854% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
</style>

</head>
<body>
<h1>Hello, world!</h1>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640">
<defs>
<path d="M270.71 160.71L152.86 219.64L152.86 337.5L270.71 396.43L388.57 337.5L388.57 219.64L270.71 160.71Z" id="aoQexA6Ie" class="gpBkVCyh_0"></path>
<path d="M187.14 256.43L187.14 268.57L187.14 280L190 290L197.86 297.14L207.86 302.86L219.29 304.29L227.86 297.86L227.86 284.29L225 273.57L222.86 263.57L222.86 252.14L230.71 245.71L245 245.71L254.29 251.43L261.43 258.57L265 268.57L265 280.71L272.86 287.14L279.29 279.29L279.29 267.86L279.29 255.71L279.29 245L285 236.43L295 235L300.71 243.57L303.57 254.29L303.57 265.71L297.86 275L288.57 280L280 285.71L274.29 294.29L272.86 304.29L282.14 309.29L294.29 309.29L304.29 307.86L315.71 302.86L325.71 296.43L330.71 286.43L330.71 275L330.71 263.57L327.86 253.57L324.29 241.43L321.43 231.43L314.29 222.86L304.29 222.14L292.86 222.14L282.14 222.14L271.43 219.29L263.57 212.14L262.86 202.14L273.57 199.29L284.29 198.57L295.71 197.86L305.71 198.57L320 202.86L330 208.57L337.14 216.43L342.86 226.43L347.14 235.71L350 245.71L352.14 256.43L352.14 267.86L352.14 278.57L349.29 289.29L343.57 298.57L335.71 305.71L326.43 312.14L317.86 317.86L307.14 320L297.14 322.14L286.43 322.14L276.43 320.71L265.71 319.29L255.71 321.43L245.71 323.57L234.29 327.86L225.71 334.29L224.29 344.29L230 352.86L238.57 359.29L249.29 362.14L260.71 362.14L272.86 361.43L282.14 355.71L286.43 345L288.57 335L298.57 330L308.57 330.71L319.29 333.57L329.29 335L340 331.43L347.86 325L357.14 315.71L365 309.29L371.43 300L373.57 289.29L371.43 279.29L367.14 270" id="a1pFSDYYU6" class="gpBkVCyh_1"></path>
</defs>
<g>
<g>
<g>
<g>
<use xlink:href="#aoQexA6Ie" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="7" stroke-opacity="1"></use>
</g>
</g>
<g>
<g>
<use xlink:href="#a1pFSDYYU6" opacity="1" fill-opacity="0" stroke="#1ae3ab" stroke-width="2" stroke-opacity="1"></use>
</g>
</g>
</g>
</g>
</svg>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Benzer içerikler