Angular 2创建的SVG不能进行缩放。

Question

Angular 2创建的SVG不能进行缩放。

3

众所周知，带有viewbox的svg元素应该根据样式自动缩放大小。

例如，我们拿一个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

有趣的是，如果您在开发工具中选择此svg元素并运行

$0.outerHTML = $0.outerHTML

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

PS：同样的问题在俄语中。

- Qwertiy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

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