Support SVG foreignObject by adding xhtml namespace

[gionkunz]

The following use-case is quite common in SVG to embed HTML content via foreignObject (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject). Especially since SVG 1.1 is not supporting multi-line text.

    <svg width="100%" height="400">
      <circle cx="10" cy="10" r="5" />
      <foreignObject x="10" y="20" width="100%" height="100">
        <h1 xmlns="http://www.w3.org/1999/xhtml">Test</h1>
      </foreignObject>
    </svg>

Programmatically this means that all elements within SVG foreign objects need to be created with createElementNS and the corresponding namespace. HTML elements need to get the http://www.w3.org/1999/xhtml namespace.

Since Angular currently only supports xlink and svg namespaces, I'm proposing to add the xhtml namespace too so the following example would work:

import {Component} from 'angular2/core';

@Component({
  selector: 'app'
  template: `
    <svg width="100%" height="400">
      <circle cx="10" cy="10" r="5" />
      <foreignObject x="10" y="20" width="100%" height="100">
        <xhtml:h1>Test</xhtml:h1>
      </foreignObject>
    </svg>
  `
})
export class App {}

http://plnkr.co/edit/EHPWvIN3UgXnkBv2884n?p=preview

Changes presumably go into https://github.com/angular/angular/blob/master/modules/angular2/src/platform/dom/dom_renderer.ts#L46-L47 and https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/schema/dom_element_schema_registry.ts#L9-L10

[gionkunz]

I've created a PR for this #6192

[gionkunz]

I've created an updated PR for this issue #9458

[vicb]

fixed

[angular-automatic-lock-bot]

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.}