gpt4 book ai didi

javascript - SVG tspan 的定位和样式?

转载 作者:行者123 更新时间:2023-12-03 00:51:05 25 4
gpt4 key购买 nike

我在使用此 SVG 时遇到两个问题。首先,我需要它来使用 Raleway 字体。其次,我需要相反的文字。我尝试过使用 CSS 平移和旋转,但它们没有提供我正在寻找的结果。我已经阅读了 SVG 样式的文档,但它没有什么帮助,并且没有满足我的特殊需求。我也通过 Google 进行了搜索,他们只建议了我已经尝试过的东西。

我在下面添加了一些代码以供引用。

// JavaScript that was graciously provided for me:

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);
<svg viewBox="0 40 100 40">
<g id="testGroupC2" >
<style type="text/css">
<![CDATA[

@import url('https://fonts.googleapis.com/css?family=Raleway:thin');
text{font-family:Raleway; z-index: 20}

]]>
</style>
<path id="testPath2"/>
<text>
<textpath style="font-size:4pt;" xlink:href="#testPath2" startOffset="63%" >
<tspan x="-3" y="10">Home</tspan>
</textpath>
</text>

</g>
</svg>

最佳答案

您可以采用底部曲线并将其用作文本的路径。它必须是相反的顺序,否则(就像代码中的情况一样)文本将显示在路径下方并旋转​​(实际上是路径的方向)。

因此:仅用于文本的额外路径以及对文本对齐方式的一些调整

结果如下:

// 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);
<svg viewBox="0 40 100 40">
<defs><path id="textPath"/></defs>
<g id="testGroupC2" >
<style type="text/css">
<![CDATA[
@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>

关于javascript - SVG tspan 的定位和样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53038255/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com