Question

我刚看到这个简单的svg在线 FIDDLE HERE 。

HTML如下所示：

  <div class="burger-ring is-open">
              <svg class="svg-ring">
                  <path class="path" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" />
              </svg>
  </div>

以上是否是申报SVG的正确方法？没有xmlns="http://www.w3.org/2000/svg"？

旋转动画是否跨浏览器？我已经在IE，FF，Chrome和Opera中进行了测试。

.path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  stroke-linejoin: round;
}

@-webkit-keyframes dash-in {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash-in {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash-out {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
@keyframes dash-out {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}

Answer 1

HTML没有名称空间，XML具有名称空间。

如果您将SVG嵌入作为text / html的HTML文件中，则不需要xmlns属性。
如果您将SVG嵌入到作为XML的文件中，例如application / xhtml + xml你需要xmlns属性。

关于你的第二个问题：edge之前的IE版本不支持SVG的CSS动画。

声明SVG的正确方法是什么？

1 个答案: