Question

在这里找不到我的问题的解决方案，因此我要发布一个新问题。我的SVG中的文本在Edge中未正确对齐。它在Firefox中工作正常，但是当我在Edge中打开页面时，文本弯曲且间距不均匀。不过，它在Firefox中看起来很棒。我尝试了许多修复程序，但似乎没有任何效果。是什么原因造成的，我该如何解决？

JavaScript

const rad = Math.PI / 180;

let cx = 50, cy = 100, R = 50, r = 35, A = 40 , a = 5, o=4;
// o for offset
svgGroupC.setAttributeNS(null, "transform", `rotate(${-90 -(A / 2) - a} ${cx} ${cy})`);

// control points for the quadratic Bézier
let px1 = cx + R * Math.cos(0);
let py1 = cy + R * Math.sin(0);
let px2 = cx + R * Math.cos((2*a + A)*rad);
let py2 = cy + R * Math.sin((2*a + A)*rad);
let px3 = cx + r * Math.cos((2*a + A)*rad);
let py3 = cy + r * Math.sin((2*a + A)*rad);
let px4 = cx + r * Math.cos(0);
let py4 = cy + r * Math.sin(0);

// points used to draw the shape
let x11 = cx + (R-o) * Math.cos(0);
let y11 = cy + (R-o) * Math.sin(0);

let x1 = cx + R * Math.cos(a*rad);
let y1 = cy + R * Math.sin(a*rad);

let x2 = cx + R * Math.cos((a + A)*rad);
let y2 = cy + R * Math.sin((a + A)*rad);

let x21 = cx + (R-o) * Math.cos((2*a + A)*rad);
let y21 = cy + (R-o) * Math.sin((2*a + A)*rad);

let x31 = cx + (r+o) * Math.cos((2*a + A)*rad);
let y31 = cy + (r+o) * Math.sin((2*a + A)*rad);

let x3 = cx + r * Math.cos((a + A)*rad);
let y3 = cy + r * Math.sin((a + A)*rad);

let x4 = cx + r * Math.cos(a*rad);
let y4 = cy + r * Math.sin(a*rad);

let x41 = cx + (r+o) * Math.cos(0);
let y41 = cy + (r+o) * Math.sin(0);

// Rounded corners with quadratic Bézier curves
    d = `M${x1},${y1} 
         A${R},${R},0 0,1 ${x2},${y2}
         Q${px2},${py2} ${x21},${y21} 
         L${x31},${y31}
         Q${px3},${py3} ${x3},${y3}
         A${r},${r},0 0,0 ${x4},${y4}
         Q${px4},${py4} ${x41},${y41}
         L${x11},${y11}
         Q${px1},${py1} ${x1},${y1}Z`;

svgPath.setAttributeNS(null,"d",d);

HTML

<svg viewBox="0 40 100 40">
  <g id="svgGroupC" >
       <style type="text/css">

          @import url('https://fonts.googleapis.com/css?family=Raleway');
          text{
            font-size: 4pt;
              fill: #ffffff;
              text-anchor: middle;
              font-family: 'Raleway';
              z-index: 2;
          }

  </style>
      <path id="svgPath"/>
       <text>
         <textpath xlink:href="#svgPath" startOffset="53%" >
            <tspan dx="14" dy="9">CLIENTS</tspan>
      </textpath>
    </text>   
  </g>
</svg>

Answer 1

我发现SVG通常在小尺寸的情况下排列不佳。将所有值乘以10，可使Edge中的文本正确对齐：

SVG

<svg viewBox="0 400 1000 400">
  <g id="svgGroupC" >
       <style type="text/css">

          @import url('https://fonts.googleapis.com/css?family=Raleway');
          text{
            font-size: 40pt;
              fill: #ffffff;
              text-anchor: middle;
              font-family: 'Raleway';
              z-index: 2;
          }

  </style>
      <path id="svgPath"/>
       <text>
         <textpath xlink:href="#svgPath" startOffset="53%" >
            <tspan dx="140" dy="90">CLIENTS</tspan>
      </textpath>
    </text>   
  </g>
</svg>

JS

const rad = Math.PI / 180;

let cx = 500, cy = 1000, R = 500, r = 350, A = 40 , a = 5, o=4;
// o for offset
svgGroupC.setAttributeNS(null, "transform", `rotate(${-90 -(A / 2) - a} ${cx} ${cy})`);

// control points for the quadratic Bézier
let px1 = cx + R * Math.cos(0);
let py1 = cy + R * Math.sin(0);
let px2 = cx + R * Math.cos((2*a + A)*rad);
let py2 = cy + R * Math.sin((2*a + A)*rad);
let px3 = cx + r * Math.cos((2*a + A)*rad);
let py3 = cy + r * Math.sin((2*a + A)*rad);
let px4 = cx + r * Math.cos(0);
let py4 = cy + r * Math.sin(0);

// points used to draw the shape
let x11 = cx + (R-o) * Math.cos(0);
let y11 = cy + (R-o) * Math.sin(0);

let x1 = cx + R * Math.cos(a*rad);
let y1 = cy + R * Math.sin(a*rad);

let x2 = cx + R * Math.cos((a + A)*rad);
let y2 = cy + R * Math.sin((a + A)*rad);

let x21 = cx + (R-o) * Math.cos((2*a + A)*rad);
let y21 = cy + (R-o) * Math.sin((2*a + A)*rad);

let x31 = cx + (r+o) * Math.cos((2*a + A)*rad);
let y31 = cy + (r+o) * Math.sin((2*a + A)*rad);

let x3 = cx + r * Math.cos((a + A)*rad);
let y3 = cy + r * Math.sin((a + A)*rad);

let x4 = cx + r * Math.cos(a*rad);
let y4 = cy + r * Math.sin(a*rad);

let x41 = cx + (r+o) * Math.cos(0);
let y41 = cy + (r+o) * Math.sin(0);

// Rounded corners with quadratic Bézier curves
    d = `M${x1},${y1} 
         A${R},${R},0 0,1 ${x2},${y2}
         Q${px2},${py2} ${x21},${y21} 
         L${x31},${y31}
         Q${px3},${py3} ${x3},${y3}
         A${r},${r},0 0,0 ${x4},${y4}
         Q${px4},${py4} ${x41},${y41}
         L${x11},${y11}
         Q${px1},${py1} ${x1},${y1}Z`;

svgPath.setAttributeNS(null,"d",d);

（这些圆角现在变得更紧，因为我没有进入您的曲线，但是我想您知道要更新哪些值才能修复它们。）

您的CodePen：https://codepen.io/MSCAU/pen/VqeXxo

SVG文本在边缘未对齐

1 个答案: