No svg-element created by the



  • As we know, a svg element with a given viewbox and sizes shall be astomatically scaled to the sizes specified in styles.

    For example, we'll take a circle in the field of 200*200 and put it in. div 100*100. Svg is scaled up to the required size of 100*100, the whole:

    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>

    Now put this marking in the Angular 2:

    import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'

    @Component({
    selector: 'my-app',
    template: &lt;div&gt; &lt;svg viewbox="0 0 200 200"&gt; &lt;circle cx="100" cy="100" r="99" /&gt; &lt;/svg&gt; &lt;/div&gt;
    })
    export class App {
    constructor() {
    }
    }

    In the same style, it will be a reflection:

    Скриншот

    Why is this happening and how to fix it?
    It needs svg to be normal.

    Full example: http://plnkr.co/edit/jNJNJLo8ygVcp9SIVcDx?p=preview


    I wonder if you'll be able to distinguish this one. svg- Element in devtools squeak

    $0.outerHTML = $0.outerHTML

    the element will be considered as expected.


    PS: //stackoverflow.com/q/37701914/4928642



  • <svg viewbox="0 0 200 200">
    

    Angloular needs to correctly indicate the name of the characteristic with a large letter. B:

    <svg viewBox="0 0 200 200">
    

    https://github.com/angular/angular/issues/8987

    PS: Original //stackoverflow.com/a/37702208/4928642 from //stackoverflow.com/users/1038015/robert-longson ♪




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2