Арабский текст поверх textPath в d3.js SVG переворачивается в браузере Chrome - PullRequest
Новая
       24

Арабский текст поверх textPath в d3.js SVG переворачивается в браузере Chrome

1 голос
/ 18 мая 2019

Я пытаюсь реализовать арабский текст поверх textpath для визуализации d3. Мне нужно, чтобы текст был изогнут по дуге.

Мой результат

Я пробовал разные варианты, такие как dir = rtl, xml: lang = "fa и даже переворачивал текст, который не имел успеха. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='utf-8'>
  <title>
    Curved Text in SVG
  </title>
  <script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
  <style type="text/css">
    svg {
      display: block;
      margin: 0 auto;
    }
    
    circle {
      fill: blue;
    }
    
    path {
      fill: none;
      stroke: white;
      stroke-width: 1px;
    }
    
    text {
      font-family: cursive;
      font-size: 30px;
      font-weight: bold;
      text-anchor: middle;
    }
    
    h1 {
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>!مرحبا بالعالم</h1>
  <script type="text/javascript">
    var width = 300,
      height = 400,
      radius = 150;
    // insert the main SVG element
    var svg = d3.select('body').append('svg')
      .attr({
        height: height,
        width: width,
        id: 'mainSVG',
        dir: 'rtl'
      });
    // get the width of the SVG
    var width = document.getElementById('mainSVG').getBoundingClientRect().width;
    // path data generation depends on width and radius we've chosen
    function getPathData() {
      // adjust the radius a little so our text's baseline isn't sitting directly on the circle
      var r = radius * 0.95;
      var startX = width / 2 - r;
      return 'm' + startX + ',' + (height / 2) + ' ' +
        'a' + r + ',' + r + ' 0 0 0 ' + (2 * r) + ',0';
    }
    // add our path definition for the curved textPath to follow
    svg.append('defs')
      .append('path')
      .attr({
        d: getPathData,
        id: 'curvedTextPath'
      });
    // add our circle element centered within the svg
    svg.append('circle')
      .attr({
        cx: width / 2,
        cy: height / 2,
        r: radius,
        id: 'mainCircle'
      });
    // add our path element in the main SVG so we can see it for reference
    svg.append('path')
      .attr({
        d: getPathData,
        id: 'visiblePath'
      });


    // add our text with embedded textPath and link the latter to the defined #curvedTextPath
    svg.append('text')
      .append('textPath')
      .attr({
        startOffset: '50%',
        'xlink:href': '#curvedTextPath',
        'method': 'stretch '
      })
      .text('!مرحبا بالعال');
  </script>
</body>

</html>

Кто-нибудь, пожалуйста, подскажите, как достичь ожидаемого результата. Если это невозможно напрямую, каковы возможные решения для достижения того же.

...