Translate directive not working in SVG on Safari

[27leaves]

Hi!

I have the following problem: It seems that the translate directive is not working in Safari inside an SVG text element. In Chrome it works as expected. The filter works in Safari, too.

Demo: http://plnkr.co/edit/Hxz0XNTvmqI8Wz3MWqEB?p=preview

[knalli]

Yes, looks like a Safari problem. I can confirm I see the exception, but I'm unable to debug this right now. The developer tools are broken for me, do not know if this is only by me or a general issue on Safari atm.

[knalli]

The problem lies here:

angular-translate/src/directive/translate.js

Line 92 in e97dd28

var translateValueExist = tElement[0].outerHTML.match(/translate-value-+/i);

there is a npe or so..

[tspaeth]

Here is some information on that:
http://stackoverflow.com/questions/12592417/outerhtml-of-an-svg-element

In case of a missing implementation in the browser, we can copy the dom(part), create a fake node around the target element and then take the innerHTML of that as the "outerHTML"...

[pedrosanta]

Yep, got that issue too. Using the translate filter works though.

[Pumpuli]

This is still broken in IE. Reason is the same:

angular-translate/src/directive/translate.js

Line 118 in 92bc955

var translateValueExist = tElement[0].outerHTML.match(/translate-value-+/i);

SVG elements don't have outerHTML. Or at least they didn't have, and that's still true in IE11.

[rcollette]

We're seeing that using data-translate directive does not work in Chrome either, despite the applied fix.

[ScallyGames]

From the linked SO post adding this polyfill

Object.defineProperty(SVGElement.prototype, 'outerHTML', {
    get: function () {
        var $node, $temp;
        $temp = document.createElement('div');
        $node = this.cloneNode(true);
        $temp.appendChild($node);
        return $temp.innerHTML;
    },
    enumerable: false,
    configurable: true
});

seems to fix this.