Repository navigation
Support SVG foreignObject by adding xhtml namespace #6190
Description
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
Activity
gionkunz commentedon Dec 31, 2015
I've created a PR for this #6192
gionkunz commentedon Jun 23, 2016
I've created an updated PR for this issue #9458
vicb commentedon Jul 29, 2016
fixed
angular-automatic-lock-bot commentedon Sep 9, 2019
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.