title: Why IE 11 doesn't apply SVG styles with external CSS?
body: <p>I draw <code>SVG</code> path inside the template. It looks good for Chrome, Firefox and Edge, but IE 11 doesn't display my path. When I start using inline attributes it works fine for IE 11, but it doesn't look elegantly. I want to keep my code concise.</p>
  
  <p>IE 11 doesn't display my <code>path</code> if I use the following template and external CSS.</p>
  
  <pre><code>&lt;svg:g&gt;
      &lt;svg:path [ngClass]="path.pathType === solid 
              ? 'solid-path'
              : 'dotted-path'" 
              [attr.d]="pathValue"&gt;
      &lt;/svg:path&gt;
  &lt;/svg:g&gt;
  </code></pre>
  
  <p>External CSS:</p>
  
  <pre><code>.solid-path {
      stroke: blue;
      stroke-width: 2;
      fill: transparent;
  }
  
  .dotted-path {
      stroke: blue;
      stroke-dasharray: 3, 3;
      stroke-width: 2;
      fill: transparent;
  }
  </code></pre>
  
  <p>Everything works fine if I use the following template with inline attributes.</p>
  
  <pre><code>&lt;svg:g&gt;
     &lt;svg:path 
        stroke="blue"
        fill="transparent"
        [attr.d]="pathValue"
        [attr.stroke-dasharray]="path.pathType !== solid ? 3 : 0"&gt;
     &lt;/svg:path&gt;
  &lt;/svg:g&gt;
  </code></pre>
  
  <p>How can I make IE 11 use the styles from external <code>CSS</code> instead of inline attributes? Thanks in advance. </p>