SVG elements are rendering incorrectly (alpha.38)

SVG elements inside templates are not visible with alpha.38. From what I can see, the browser is not recognizing the svg element.

Works in alpha.37: http://plnkr.co/edit/GOEp4DSa0Q3HGZGxXVAi
Breaks in alpha.38: http://plnkr.co/edit/thIhnOB9zhzIQeEnmZUA

import {bootstrap, bind, Component, View} from 'angular2/angular2';

@Component({
  selector: 'app-cmp'
})
@View({
  template: `
    <div>
      <svg fill="000000" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
      </svg>
    </div>
  `
})
class App {
  constructor() {}
}

bootstrap(App);

@tbosch

must be linked to the new compiler
/cc @tbosch

👍 I have the same issue.

Same here.

Using this for current Workaround:

import {BrowserDomAdapter} from 'angular2/src/core/dom/browser_adapter';

BrowserDomAdapter.prototype.createElement = function(tagName, doc) {
    if (doc === void 0) {
        doc = document;
    }

    if(/^(svg|g|use|path|rect|path|text)$/i.test(tagName)) {
        return doc.createElementNS('http://www.w3.org/2000/svg', tagName);
    } else {
        return doc.createElement(tagName);
    }
};

Yes, this is a know issue. Working on this right now.

@tbosch

@tbosch - @xbtequila fix works well but should be extended to include polygon, polyline etc

Is there any updates on the issue? As it looks like new compiler breaks not just svg but some other CSS calculations..

Quick update: A similar hotfix has just landed on master, the real fix is still open though...

@tbosch

@tbosch binding to the xlink:href attribute still does not seem to work. Example:

<svg>
   <use [attr.xlink:href]="iconUrl"></use>
</svg>

Let's handle it here then:

A component in 2.0.0-alpha.45 with

template: `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"></svg>`

arrives in the DOM as

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" version="1.1"></svg>

Note the lower-case b of viewbox. That way, the SVG doesn't render correctly.

As a workaround, I'm using an ElementRef in the constructor to manually set the correct property.

@Tragetaschen

@Tragetaschen wow, that's annoying. I didn't see that for the longest time and was wracking my brain figuring out what was going wrong. Thanks!

And because it's so annoying (and cost me again some hair :) )

stdDeviation in a feGaussianBlur also loses its capitalization.

With alpha.46, all SVG attributes are now rendered correctly. Yay!

However, SVG element names still are converted to lower-case. I'm seeing this with feOffset, feGaussianBlur, feComposite, or feFlood. SVG elements referencing such a <filter> are not rendered (Firefox) or don't show the filter (Edge).

~~I'm also seeing an error with some bound properties (eg. height) on SVGs: Cannot set property height of #<SVGSVGElement> which has only a getter~~ EDIT: have to use [attr.height]. My bad.

Reported working, YAY!

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

SVG elements are rendering incorrectly (alpha.38) #4506

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SVG elements are rendering incorrectly (alpha.38) #4506

Description

Activity

vicb commented on Oct 4, 2015

rolandjitsu commented on Oct 4, 2015

xbtequila commented on Oct 5, 2015

tbosch commented on Oct 5, 2015

markharding commented on Oct 6, 2015

4 remaining items

cajoy commented on Oct 25, 2015

tbosch commented on Oct 28, 2015

larrifax commented on Oct 29, 2015

Tragetaschen commented on Oct 30, 2015

wfalkwallace commented on Oct 30, 2015

Tragetaschen commented on Nov 3, 2015

Tragetaschen commented on Nov 12, 2015

wfalkwallace commented on Nov 13, 2015

bradlygreen commented on Nov 30, 2015

angular-automatic-lock-bot commented on Sep 7, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions