Power BI视觉系统中的SVG文本路径-在Firefox/Edge中失败-它能工作吗?

Power BI视觉系统中的SVG文本路径-在Firefox/Edge中失败-它能工作吗?,svg,powerbi,Svg,Powerbi,经过一些跨浏览器测试后,我发现SVG文本路径似乎在Power BI自定义视觉效果中出现了中断,至少在最新版本的Firefox或Edge中是如此。它们在最近和不太新的Chrome以及IE11中工作良好 下面JSFIDLE中的代码在Firefox中正常工作,沿路径显示“hello”,并证明浏览器可以处理该功能,但与可直接在Power BI DevTools中编译的等效代码接近,显示的文本位于0,0,与路径断开连接。但在Chrome中,它与JSFIDLE中的一样 IVisual演示代码: modul

经过一些跨浏览器测试后,我发现SVG文本路径似乎在Power BI自定义视觉效果中出现了中断,至少在最新版本的Firefox或Edge中是如此。它们在最近和不太新的Chrome以及IE11中工作良好

下面JSFIDLE中的代码在Firefox中正常工作,沿路径显示“hello”,并证明浏览器可以处理该功能,但与可直接在Power BI DevTools中编译的等效代码接近,显示的文本位于0,0,与路径断开连接。但在Chrome中,它与JSFIDLE中的一样

IVisual演示代码:

module powerbi.visuals {

export class newVisual implements IVisual {
    public static capabilities: VisualCapabilities = {
        dataRoles: [
            {
                name: "Category",
                kind: VisualDataRoleKind.Grouping
            },
            {
                name: "Y",
                kind: VisualDataRoleKind.Measure
            }
        ],
        dataViewMappings: [{
            categorical: {
                categories: {
                    for: { in: "Category" }
                }
            }
        }]
    };

    private root: D3.Selection;
    private gCont: D3.Selection;

    public init(options: VisualInitOptions): void {

        options.viewport.width=500;
        options.viewport.height=500;

        this.root = d3.select(options.element.get(0))
            .append('svg')
            .attr("width", options.viewport.width)
            .attr("height", options.viewport.height);

        this.gCont = this.root
            .append("g")
            .attr("transform", "translate(50,50)");

        var line = d3.svg.line()
          .x(function(d) {
            return d.x;
          })
          .y(function(d) {
            return d.y;
          }).interpolate("linear");

        this.gCont
          .append("path")
          .style("stroke", "black")
          .attr("id", "pathid")
          .attr("d", function() {
            return line([{"x": 100, "y": 100}, {"x": 200, "y": 150}]);
          });

        this.gCont
          .append("text")
          .append("textPath")
          .text("hello")
          .attr("xlink:href", "#pathid");
}

    public update(options: VisualUpdateOptions) {}
    public destroy() {}
}
}

我是否忘记设置导致此问题的原因,或者这是目前无法克服的真正不兼容

注意-我知道在转换过程中需要不断重新设置xlink:href的错误-存在于我更复杂的动画代码中,并且在Chrome等中完成了它的工作-这对解决此问题没有帮助

Firefox中的输出(减少-即使在DevTools中,整个内容也相当大):


你好

将Power BI DevTools在Firefox中生成的DOM添加到问题中。我已经添加了我认为您在上面要求的内容。值得注意的是,在Firefox中单独使用时,它也能正确显示。这就是你想让我包括的吗?DOM是有效的,所以肯定还有更多。完整的DOM中是否有任何
标记?该部分中确实有一个基本标记:我还确认,删除该节点并在DevTools中重新编译代码可以立即解决问题,因此您已经确定了原因。现在唯一的问题是是否有办法解决这个问题。到目前为止,我发现在这种情况下需要一个完全限定的URL,不幸的是,我认为不会有一个一致的URL。即使DevTools one看起来有些一致,但真正的PowerBI web应用程序中的DevTools one仍然是不断变化的,而且视觉需要在所有地方都工作。
<div class="visualContainer visual">
<svg height="500" width="500">
<g transform="translate(50,50)">
<path d="M100,100L200,150" id="pathid" style="stroke: black;"></path>
<text><textPath xlink:href="#pathid">hello</textPath></text>
</g>
</svg>
</div>