众所周知 svg-element 与viewbox
应该自动缩放到样式的尺寸。
例如,我们将一个 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() {
}
}
使用相同的样式,我们将看到:
为什么会发生这种情况以及如何解决?
I need svg
自动缩放。
完整示例:http://plnkr.co/edit/jNJNJLo8ygVcp9SIVcDx?p=preview http://plnkr.co/edit/jNJNJLo8ygVcp9SIVcDx?p=preview
有趣的是,如果你选择这个svg
-devtools 中的元素并运行
$0.outerHTML = $0.outerHTML
该元素将获得其预期的表示形式。
PS: 同样的问题用俄语。 //ru.stackoverflow.com/q/532994/178988