浏览器支持SVG操作?

时间:2015-04-28 08:14:13

标签: css svg cross-browser

有没有人知道浏览器支持使用stroke-dasharray和stroke-dashoffset这样的东西?

我只是在这里问,因为我似乎无法在网络上的任何其他地方找到它。

作为参考,这款笔完全适用于Chrome和Opera。在Firefox上完成时,它会应用错误的填充。在IE上它甚至都没有显示。

http://codepen.io/mildrenben/pen/yydxGY

svg {
  width: 1400px;
  height: 800px; 
  stroke-linecap: square;
  stroke-width: 10;
  stroke: transparent;
  fill: none;
  stroke-dasharray: 3500;
  stroke-dashoffset: 3500;
}

.fil0 {
  animation: black 3s ease-in forwards;
}

.fil1, .fil2 {
  animation: green 3s ease-in forwards;
}

@keyframes green {
  80% {
    stroke-dashoffset: 0;
    stroke: $green;
  }
  85% {
    fill: transparent;
  }
  100% {
    fill: $green;
    stroke-dashoffset: 0;
  }
}

@keyframes black {
  80% {
    stroke-dashoffset: 0;
    stroke: $black;
  }
  85% {
    fill: transparent;
  }
  100% {
    fill: $black;
    stroke-dashoffset: 0;
  }
}

0 个答案:

没有答案