fix(renderer): support `xlink:href` attribute in svg

Closes #4956
This commit is contained in:
Tobias Bosch 2015-10-27 15:41:34 -07:00
parent dc6a066fed
commit 540b8c2a1a
4 changed files with 27 additions and 18 deletions

View File

@ -346,7 +346,14 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
String tagName(Element element) => element.tagName; String tagName(Element element) => element.tagName;
Map<String, String> attributeMap(Element element) { Map<String, String> attributeMap(Element element) {
return new Map.from(element.attributes); var result = {};
result.addAll(element.attributes);
// TODO(tbosch): element.getNamespacedAttributes() somehow does not return the attribute value
var xlinkHref = element.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
if (xlinkHref != null) {
result['xlink:href'] = xlinkHref;
}
return result;
} }
bool hasAttribute(Element element, String attribute) => bool hasAttribute(Element element, String attribute) =>

View File

@ -226,7 +226,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
hasAttribute(element, attribute: string): boolean { return element.hasAttribute(attribute); } hasAttribute(element, attribute: string): boolean { return element.hasAttribute(attribute); }
getAttribute(element, attribute: string): string { return element.getAttribute(attribute); } getAttribute(element, attribute: string): string { return element.getAttribute(attribute); }
setAttribute(element, name: string, value: string) { element.setAttribute(name, value); } setAttribute(element, name: string, value: string) { element.setAttribute(name, value); }
setAttributeNS(ns: string, element, name: string, value: string) { setAttributeNS(element, ns: string, name: string, value: string) {
element.setAttributeNS(ns, name, value); element.setAttributeNS(ns, name, value);
} }
removeAttribute(element, attribute: string) { element.removeAttribute(attribute); } removeAttribute(element, attribute: string) { element.removeAttribute(attribute); }

View File

@ -116,7 +116,7 @@ const SVG_ELEMENT_NAMES = CONST_EXPR({
'vkern': true 'vkern': true
}); });
const SVG_ATTR_NAMESPACES = CONST_EXPR({'href': XLINK_NAMESPACE}); const SVG_ATTR_NAMESPACES = CONST_EXPR({'href': XLINK_NAMESPACE, 'xlink:href': XLINK_NAMESPACE});
export abstract class DomRenderer extends Renderer implements NodeFactory<Node> { export abstract class DomRenderer extends Renderer implements NodeFactory<Node> {
abstract registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], abstract registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[],

View File

@ -1745,22 +1745,24 @@ export function main() {
if (DOM.supportsDOMEvents()) { if (DOM.supportsDOMEvents()) {
describe('svg', () => { describe('svg', () => {
it('should support svg elements', it('should support svg elements',
inject([TestComponentBuilder, AsyncTestCompleter], inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
(tcb: TestComponentBuilder, async) => { async) => {
tcb.overrideView(MyComp, new ViewMetadata({template: '<svg><g></g></svg>'})) tcb.overrideView(MyComp,
.createAsync(MyComp) new ViewMetadata({template: '<svg><use xlink:href="Port" /></svg>'}))
.then((rootTC) => { .createAsync(MyComp)
var el = rootTC.debugElement.nativeElement; .then((rootTC) => {
var svg = DOM.childNodes(el)[0]; var el = rootTC.debugElement.nativeElement;
var g = DOM.childNodes(svg)[0]; var svg = DOM.childNodes(el)[0];
expect(DOM.getProperty(<Element>svg, 'namespaceURI')) var use = DOM.childNodes(svg)[0];
.toEqual('http://www.w3.org/2000/svg'); expect(DOM.getProperty(<Element>svg, 'namespaceURI'))
expect(DOM.getProperty(<Element>g, 'namespaceURI')) .toEqual('http://www.w3.org/2000/svg');
.toEqual('http://www.w3.org/2000/svg'); expect(DOM.getProperty(<Element>use, 'namespaceURI'))
.toEqual('http://www.w3.org/2000/svg');
expect(DOM.getOuterHTML(<HTMLElement>use)).toContain('xmlns:xlink');
async.done(); async.done();
}); });
})); }));
}); });
} }