css - Angular 2 创建的 Svg 无法缩放

Question

众所周知，带有 viewbox 的 svg-element 应该自动缩放到样式的大小。

例如，我们将一个 200*200 的圆放入一个 100*100 的 div 中。在此之前，让 svg 占用所有 div 的空间。 Svg 被缩放以便我们可以看到完整的圆圈:

div {
  width: 100px;
  height: 100px;
  outline: 1px dotted red;
}

svg {
  width: 100%;
  height: 100%;
}

<div>
  <svg viewbox="0 0 200 200">
    <circle cx="100" cy="100" r="99" />
  </svg>
</div>

现在让我们将这个标记放入 Angular 2 组件中:

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <svg viewbox="0 0 200 200">
        <circle cx="100" cy="100" r="99" />
      </svg>
    </div>
  `
})
export class App {
  constructor() {
  }
}

我们将看到相同的样式:

为什么会发生这种情况，我该如何解决？
我需要 svg 来自动缩放。

完整示例:http://plnkr.co/edit/jNJNJLo8ygVcp9SIVcDx?p=preview

---

有趣的是，如果您在 devtools 中选择此 svg 元素并运行

$0.outerHTML = $0.outerHTML

该元素将获得其预期的表示形式。

---

附言:Same question in Russian.

Answer 1

SVG 区分大小写。正确的属性是 viewBox 而不是 viewbox。