Question

我在angular 5应用程序中使用SVG，并且我很难依赖访问DOM级别方法，例如：

createSVGPoint（）;

这就是嵌入式SVG的样子：

＆＃13;

<svg id="mainSVG" no-padding
    viewBox="0 0 480 480"
    preserveAspectRatio="xMidYMid meet"
    width="100%"
    height="100%"
    itemtype="background"
    shape-rendering="auto"
    color-rendering="optimizeSpeed"
    image-rendering="optimizeSpeed"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    ><svg:g id="svgCanvas" transform="matrix(1 0 0 1 0 0)" class="contained" svgcanvas [canvasItemsDataObject]="canvasItemsDataObject" [canvasBackgroundDataObject]="canvasBackgroundDataObject"></svg:g>
</svg>

＆＃13;

所以我现在这样做的方式非常糟糕我想：

在ngAfterViewInit（）中，我调用：this.mainSVG = document.getElementById（＆＃34; mainSVG＆＃34;）; 然后我可以使用以下方法直接进行访问方法：this.mainSVG.createSVGPoint（）;等

我知道我不应该使用这种方法直接访问DOM，但我对于什么是正确的路径感到困惑？

我尝试过但无法实现的目标：

使用ViewChild：将#mainSVG添加到html模板并执行@ViewChild（＆＃39; mainSVG＆＃39;）mainSVG2：ElementRef;我无法使用它，mainSVG2.createSVGPoint（）。
执行以下操作： this.mainSVG = this.renderer.selectRootElement（＆＃39; #mainSVG＆＃39;）;

仍然不适合我; /

访问SVG元素的DOM级别方法的正确方法是什么？

Answer 1

使用您的方法＃1，您应该能够以这种方式调用dom方法

@ViewChild('mainSVG') mainSVG2: ElementRef
//...
mainSVG2.nativeElement.createSVGPoint()

在角应用程序中访问DOM方法

1 个答案: