cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
tomhawley Regular Visitor
Regular Visitor

SVG Text Path in Power BI Visuals - Failing in Firefox/Edge

After some cross-browser testing i'm finding that SVG text paths seem to break in Power BI custom visuals, at least in recent versions of Firefox or Edge. They work fine in recent and not so recent Chrome, as well as in IE11.

 

The code in the JSFiddle below works correctly in Firefox, displaying "hello" along the path and proving the browser handles the functionality, however close to equivalent code which can be compiled directly in Power BI DevTools shows the text sat at 0,0, disconnected from the path. In Chrome though, it appears as it does in the JSFiddle.

 

https://jsfiddle.net/tg5nh2ox/1/

 

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() {}
    }
}

Have I forgotten to set something that's causing this problem, or is this a genuine incompatibility that cannot currently be overcome? 

 

Note - I'm aware of the bug that requires the xlink:href to be constantly re-set during a transition - that exists in my more complex code with animation, and does it's job in Chrome etc - it does not help with this issue.

 

1 REPLY 1
tomhawley Regular Visitor
Regular Visitor

Re: SVG Text Path in Power BI Visuals - Failing in Firefox/Edge

This topic is progressing a little in the comments on Stack Overflow. I'm curious to know if other developers have run into this. I thought people would be curving text all over the place in these visuals, but I guess when I check out the gallery I mostly see people stopping at normal <text> tags with transformation and rotation. It seems at first glance that href can't be used to link a text path to a path at present, though I wonder if sandboxing will resolve this by removing the / base from the context of the visual? No time to test that yet.

 

http://stackoverflow.com/questions/36265323/svg-text-path-in-power-bi-visuals-failing-in-firefox-edg...

Helpful resources

Announcements
New Topics Started Badges Coming

New Topics Started Badges Coming

We're releasing new versions of the badge that everyone's talking about. ;) Check your inbox for notifications.

MBAS 2020

Save the new date (and location)!

Our business applications community is growing—so we needed a different venue, resulting in a new date and location. See you there!

Difinity Conference

Difinity Conference

The largest Power BI, Power Platform, and Data conference in New Zealand

Top Kudoed Authors (Last 30 Days)