Angular 2 创建的 Svg 无法缩放

Posted 2023-03-06

【中文标题】Angular 2 创建的 Svg 无法缩放

【英文标题】：Svg created by Angular 2 doesn't scale

【发布时间】：2016-10-08 16:29:29

【问题描述】：

众所周知，带有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-element 并运行

$0.outerhtml = $0.outerHTML

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

---

PS：Same question in Russian.

【参考方案1】：

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

【讨论】：

哇，我正在为此失去理智。谢谢。