It is a common knowledge that an svg element with the attribute viewbox should automatically scale to fit the sizes specified in the styles.
For instance, let's consider a 200*200 circle placed inside a 100*100 div. Prior to that, we need to ensure that the svg takes up all of the space within the div. The svg is scaled accordingly so that the entire circle is visible:
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>Next, let's integrate this markup into an Angular 2 component:
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() {
}
}
With the same styling, the result will look like this:
https://i.sstatic.net/KDfUH.png
Why does this occur and how can it be resolved?
I require the svg to scale automatically.
Complete example: http://plnkr.co/edit/jNJNJLo8ygVcp9SIVcDx?p=preview
Interestingly, if you select the svg element in devtools and execute the following:
$0.outerHTML = $0.outerHTML
the element will display correctly as expected.