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

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动画。