title: SVG with RTL support for arabic language
body: <p>I have created a SVG inside a container. As I have tried for setting the position of the SVG itself and the container direction to RTL, there is no effect on the position on the nodes. I have the circle and text inside a <code>g</code> tag which itself is wrapped inside a SVG tag.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="sequenceSVG" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="-30 -20 680 350" class="svg-content svg-content-responsive"&gt;
    &lt;defs&gt;
      &lt;marker id="end-arrow" viewBox="0 -5 10 10" refX="44" markerWidth="5" markerHeight="10" orient="auto"&gt;
      &lt;path d="M0,-5L10,0L0,5" fill="#4A4A4A"&gt;&lt;/path&gt;
      &lt;/marker&gt;
    &lt;/defs&gt;
    &lt;defs&gt;
      &lt;radialGradient id="color-gradient"&gt;
        &lt;stop offset="90%" style="stop-color:#FFFFFF;"&gt;&lt;/stop&gt;
        &lt;stop offset="85%" style="stop-color:#E5E5E5;"&gt;&lt;/stop&gt;
      &lt;/radialGradient&gt;
    &lt;/defs&gt;
    &lt;path class="filled" stroke="#78D64B" stroke-width="2" fill="none" d="M272,262.5L136,210L136,105"&gt;&lt;/path&gt;
    &lt;path class="dashed" stroke="#78D64B" stroke-width="2" style="stroke-dasharray: 4, 4; marker-end: url(&amp;quot;#end-arrow&amp;quot;);" d="M136,105L272,17.5"&gt;&lt;/path&gt;
    &lt;path class="link dragline hidden" stroke="#78D64B" stroke-width="2" d="M0,0L0,0"&gt;&lt;/path&gt;
    &lt;g id="circle-group-0"&gt;
      &lt;circle cx="136" cy="105" r="25" class="filled" stroke-width="2px" fill="#78D64B" stroke="#4A4A4A" stroke-opacity="0.1" id="MC_SD_001_1_0_0" sequence="0"&gt;&lt;/circle&gt;
      &lt;text class="node-text" fill="#4A4A4A" text-anchor="middle" stroke="#4A4A4A" startOffset="50%" stroke-width="1px" alignment-baseline="middle" dominant-baseline="central" dx="136" dy="105"&gt;1&lt;/text&gt;
    &lt;/g&gt;
    &lt;g id="circle-group-1"&gt;
      &lt;circle cx="408" cy="70" r="25" class="empty" stroke-width="2px" fill="url(&amp;quot;#color-gradient&amp;quot;)" stroke="#FFFFFF" stroke-opacity="0.1" id="MC_SD_001_1_0_1" sequence="1"&gt;&lt;/circle&gt;
      &lt;text class="node-text" fill="#78D64B" text-anchor="middle" stroke="#78D64B" startOffset="50%" stroke-width="1px" alignment-baseline="middle" dominant-baseline="central" dx="408" dy="70"&gt;A&lt;/text&gt;
    &lt;/g&gt;
    &lt;g id="circle-group-2"&gt;
      &lt;circle cx="136" cy="210" r="25" class="filled" stroke-width="2px" fill="#78D64B" stroke="#4A4A4A" stroke-opacity="0.1" id="MC_SD_001_1_0_2" sequence="2"&gt;&lt;/circle&gt;
      &lt;text class="node-text" fill="#4A4A4A" text-anchor="middle" stroke="#4A4A4A" startOffset="50%" stroke-width="1px" alignment-baseline="middle" dominant-baseline="central" dx="136" dy="210"&gt;3&lt;/text&gt;
    &lt;/g&gt;
    &lt;g id="circle-group-3"&gt;
      &lt;circle cx="408" cy="157.5" r="25" class="empty" stroke-width="2px" fill="url(&amp;quot;#color-gradient&amp;quot;)" stroke="#FFFFFF" stroke-opacity="0.1" id="MC_SD_001_1_0_3" sequence="3"&gt;&lt;/circle&gt;
      &lt;text class="node-text" fill="#78D64B" text-anchor="middle" stroke="#78D64B" startOffset="50%" stroke-width="1px" alignment-baseline="middle" dominant-baseline="central" dx="408" dy="157.5"&gt;C&lt;/text&gt;
    &lt;/g&gt;
    &lt;g id="circle-group-4"&gt;
      &lt;circle cx="272" cy="262.5" r="25" class="filled" stroke-width="2px" fill="#78D64B" stroke="#4A4A4A" stroke-opacity="0.1" id="MC_SD_001_1_0_4" sequence="4"&gt;&lt;/circle&gt;
      &lt;text class="node-text" fill="#4A4A4A" text-anchor="middle" stroke="#4A4A4A" startOffset="50%" stroke-width="1px" alignment-baseline="middle" dominant-baseline="central" dx="272" dy="262.5"&gt;5&lt;/text&gt;
    &lt;/g&gt;
    &lt;g id="circle-group-5"&gt;
      &lt;circle cx="272" cy="17.5" r="25" class="empty dashed" stroke-width="2px" fill="url(&amp;quot;#color-gradient&amp;quot;)" stroke="#FFFFFF" stroke-opacity="0.1" id="MC_SD_001_1_0_5" sequence="5"&gt;&lt;/circle&gt;
      &lt;text class="node-text" fill="#78D64B" text-anchor="middle" stroke="#78D64B" startOffset="50%" stroke-width="1px" alignment-baseline="middle" dominant-baseline="central" dx="272" dy="17.5"&gt;E&lt;/text&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want the direction to get changed on the basis of the language selected. This is specifically for the arabic.</p>