我正在创建一个使用SVG的Web应用程序。
我创建了由SVG元素组成的组件,并将它们放入根svg
元素中。
它们具有属性选择器,因为SVG/XML文档树是严格的,所以我无法使用元素选择器。
它们具有一个以svg:g
标签开头的模板:
@Component({
selector:'[foo]',
template: '<svg:g>...</svg:g>',
})
在应用程序中,当用户按下按钮时,我希望创建一个组件,并同时开始拖动它。 我认为可以通过使用ComponentResolver动态地创建组件来实现:
@ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef})
protected dynamicComponentTarget: ViewContainerRef
private componentResolver: ComponentResolver
onMouseDown() {
this.componentResolver
.resolveComponent(FooComponent)
.then((factory) => {
const dynamicComponent = this.dynamicComponentTarget.createComponent(factory, 0)
const component: FooComponent = dynamicComponent.instance
const element = dynamicComponent.location.nativeElement
// add event listener to start dragging `element`.
})
}
当调用
onMouseDown()
时,组件被创建,但它的DOM元素是div
,因此它在svg文档中是非法元素,无法显示。我尝试使用
selector='svg:g[foo]'
,然后创建了g
元素,但它的命名空间不是SVG(http://www.w3.org/2000/svg
),而是普通HTML命名空间(http://www.w3.org/1999/xhtml
),其类是HTMLUnknownElement
>g
。我还尝试使用
selector='svg:svg[foo]'
,然后创建svg:svg
元素,并且它被显示。但是svg:svg
不能使用transform
属性移动,因此这对我的应用程序效果不佳。如何为属性选择器组件动态创建
svg:g
元素?我正在使用Angular2:2.0.0-rc4。