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