我正在用这样的 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);
最佳答案
对于字体,如果我去谷歌字体网站,它tells me使用
@import url('https://fonts.googleapis.com/css?family=Raleway:100');
这有什么不同吗?
对于字体定位,你应该知道 pt
您用于字体大小的单位取决于设备,不同的软件可能会有不同的解释。最好使用 px
值,特别是因为您设置了 viewBox
在 <svg>
上元素。这样,字体大小就可以保证始终保持与该 View 框相关的相同大小。
现在4pt
是一个相对较小的值,它伴随着浏览器应用优化来改进形状渲染的风险——有效地重新定位字形。 (对于小尺寸,我常常想称它们为 buggy 。)有两种策略可以解决这个问题:
- 设置 CSS 属性
text-rendering: geometricPrecision
禁用重新定位。 - 缩放所有使用的数字:选择放大的 viewBox、放大的字体大小和放大的路径数据,以便保留内部比例。最终尺寸
<svg>
呈现于受其width
管辖和height
无论如何,呈现属性。
关于html - 浏览器之间的 SVG 不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53219250/