Text within svg components seems to be transformed out of the box

[misamae]

I'm using bootstrap-rtl@3.3.4 and experiencing an issue when putting text within svg components. As you can see in the snapshot below:

The following code snippet shows how the styles are applied to the svg component:

<g class="node" transform="translate(169.0078125,161.5)" style="opacity: 1;">
    <rect rx="5" ry="5" x="-21.0390625" y="-20.5" width="42.078125" height="41"></rect>
    <g class="label" transform="translate(0,0)">
        <g transform="translate(-11.0390625,-10.5)">
                <text style="padding-left: 5px; margin-left: 5px"> 
                        <tspan xml:space="preserve" dy="1em" x="1">تهران</tspan>
                </text>
        </g>
    </g>
</g>

The issue seems to be at 4th line when translate(-11.0390625,-10.5) is applied to the <g> element. If I manually change (-11, -10) to (11, -10) it ends up placing the text in the correct place.

Also removing bootstrap-rtl from the page fixes the issue but obviously missing the advantages of amazing bootstrap-rtl component.