As is known, the svg-element with a given viewbox and dimensions should astatically scale to the sizes specified in the styles.
For example, take a circle in the area 200 * 200 and place it in a div size 100 * 100. Svg is scaled to the required size of 100 * 100, the whole 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> And now we put this markup in the Angular 2 component template:
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 styles, we get the following mapping:
Why is this happening and how to fix it?
It requires svg to scale normally.
Full example: http://plnkr.co/edit/jNJNJLo8ygVcp9SIVcDx?p=preview
Interestingly, if you select this svg element in devtools and execute the script
$0.outerHTML = $0.outerHTML This item will be displayed in the expected way.
