Question

经过一些跨浏览器测试后，我发现SVG文本路径似乎在Power BI自定义视觉效果中有所突破，至少在最新版本的Firefox或Edge中是这样。它们在最近的Chrome和IE11中都运行良好。

以下JSFiddle中的代码在Firefox中正常工作，显示＆＃34; hello＆＃34;沿着路径并证明浏览器处理功能，但是接近可以在Power BI中直接编译的等效代码DevTools显示文本位于0,0，与路径断开连接。但是在Chrome中，它就像在JSFiddle中一样。

JSFiddle to demonstrate issue

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中，整个事情也很大）：

<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>

Power BI Visual中的SVG文本路径 - 在Firefox / Edge中失败 - 它可以工作吗？

0 个答案: