浏览器之间的 SVG 不一致

Question

我正在用这样的 SVG 创建一个网站。不过，我对实时站点有一些问题。首先，SVG 中的文本由于某种原因没有使用该字体。如果我在这里或在 codepen 上发布代码，它可以工作，但不能在实时站点上。另一个问题是文本定位在 Chrome 或 Microsoft Edge 中不一致。我已经包含了 HTML 和 JS 代码以供参考。

HTML

<svg viewBox="0 40 100 40">
    <defs><path id="textPath"/></defs>
    <g id="testGroupC2" >
      <style type="text/css">

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

      </style>
      <path id="testPath2"/>
      <text>
          <textpath xlink:href="#textPath" startOffset="50%" >
              <tspan x="0" dy="-5.5">Home</tspan>
          </textpath>
      </text>
  </g>
</svg>

JS

// JavaScript Document

const rad = Math.PI / 180;

let cx = 50, cy = 100, R = 50, r = 35, A = 40 , a = 5, o=4;
// o for offset
testGroupC2.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);

/*
No rounded corners
let d = `M${x1},${y1} A${R},${R},0 0,1 ${x2},${y2}
         L${x3},${y3} A${r},${r},0 0,0 ${x4},${y4}
         L${x1},${y1}Z`;*/

/*
Beveled corners
let d = `M${x1},${y1} 
         A${R},${R},0 0,1 ${x2},${y2}
         L${x21},${y21} 
         L${x31},${y31}
         L${x3},${y3}
         A${r},${r},0 0,0 ${x4},${y4}
         L${x41},${y41}
         L${x11},${y11}
         L${x1},${y1}Z`;*/

// 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`;

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


/* based on the 2nd A-curve of the testPath,
   but last point and starting point switched,
   as well as the sweep-flag of the curve */

    dtext = `M${x4},${y4}
         A${r},${r},0 0,1 ${x3},${y3}`;

textPath.setAttributeNS(null,"d",dtext);

Answer 1

对于字体，如果我去谷歌字体网站，它tells me 使用

@import url('https://fonts.googleapis.com/css?family=Raleway:100');

这有什么不同吗？

对于字体定位，您应该知道用于字体大小的pt 单位取决于设备，并且可能会被不同的软件以不同方式解释。最好使用px 值，特别是因为您在<svg> 元素上设置了viewBox。这样，可以保证字体大小始终与该视图框保持相同的大小。

现在4pt 是一个相对较小的值，伴随着浏览器应用优化以改进形状渲染的风险 - 有效地重新定位字形。 （对于小尺寸，我经常倾向于称它们为越野车。）有两种策略可以解决这个问题：

1. 设置 CSS 属性 text-rendering: geometricPrecision 以禁用重新定位。
2. 缩放所有使用的数字：选择放大的视图框、放大的字体大小和放大的路径数据，以保留内部比例。无论如何，<svg> 呈现的最终大小由其 width 和 height 表示属性控制。