Question

我在svg中有一个路径，它的原始点在右边，左边是以下几点，然后我将一个textPath添加到svg，所有文本都是颠倒的。如何保持文本直立并始终从左到右显示？这花了我很多时间！我很感激你的回答！

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
    <script>
    function CreateSVG(points, container) {

      var id = "idSVG";
      var ns = "http://www.w3.org/2000/svg";
      var xlinkns = "http://www.w3.org/1999/xlink";
      var lineWidth = 10;
      var color = "rgba(120,120,120,0.7)";
      var path = document.createElementNS(ns, "path");
      path.setAttribute('stroke-linecap', 'round');
      path.setAttribute('stroke-linejoin', 'round');
      path.setAttribute('stroke-dasharray', 'solid');
      path.setAttribute('fill', 'none');
      path.setAttribute('id', id);
      var _canvas = document.createElementNS(ns, 'svg');
      _canvas.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', xlinkns);
      _canvas.setAttribute('pointer-events', 'none');
      //this._canvas.appendChild(this.path);
      var defs = document.createElementNS(ns, "defs");
      defs.appendChild(path);
      var useSvg = document.createElementNS(ns, 'use');
      useSvg.setAttributeNS(xlinkns, 'xlink:href', '#' + id);
      useSvg.setAttribute('fill', 'none');
      useSvg.setAttribute('stroke', 'red');
      var textSvg = document.createElementNS(ns, 'text');
      var textPathSvg = document.createElementNS(ns, 'textPath');
      textPathSvg.setAttributeNS(xlinkns, 'xlink:href', '#' + id);
      textPathSvg.appendChild(document.createTextNode('test text'));
      textSvg.appendChild(textPathSvg);

      _canvas.appendChild(defs);
      _canvas.appendChild(useSvg);
      _canvas.appendChild(textSvg);

      var minX, maxX, minY, maxY, x, y, width, height;
      for(var i = 0, len = points.length; i < len; i++) {
        x = points[i].x;
        y = points[i].y;
        if(minX == undefined || minX > x) {
          minX = x;
        }
        if(maxX == undefined || maxX < x) {
          maxX = x;
        }
        if(minY == undefined || minY > y) {
          minY = y;
        }
        if(maxY == undefined || maxY < y) {
          maxY = y;
        }
      }
      minX = minX - lineWidth;
      minY = minY - lineWidth;
      width = maxX - minX + lineWidth;
      height = maxY - minY + lineWidth;

      _canvas.setAttribute('style', 'position:absolute;');
      _canvas.setAttribute('width', width);
      _canvas.setAttribute('height', height);
      _canvas.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
      _canvas.setAttribute('stroke', 'true');
      path.setAttribute('stroke-width', lineWidth);
      path.setAttribute('stroke', color);
      var d = [];
      for(var i = 0, len = points.length; i < len; i++) {
        d[i] = (points[i].x - minX + lineWidth / 2) + ',' + (points[i].y - minY + lineWidth / 2);
      }
      path.setAttribute('d', 'M' + d.join(' '));
      container.appendChild(_canvas);
    }
    </script>
</head>
<body onload="CreateSVG([{x:200, y:200}, {x:40, y:60}], document.getElementById('svgContainer'))">
    <div id="svgContainer"></div>
</body>
</html>

svg，保持文本颠倒

0 个答案: