gpt4 book ai didi

html - 在 SVG 的 textPath 元素内翻转文本

转载 作者:行者123 更新时间:2023-12-04 07:49:02 26 4
gpt4 key购买 nike

我在这里遇到了一个大问题。我需要翻转 180 度的 svg 元素的 textPath 标记中有一些文本。我已经使用了所有适用于 css 的方法,但绝对没有用。谁能帮我翻转元素内的文本。

function Init() {
let w = wrap.clientWidth;
let h = wrap.clientHeight;
ellipse.setAttributeNS(null, "viewBox", `0 0 ${w} ${h}`);
let d = `M${w / 10},${h / 2}A${4 * w / 10},${4 * h / 10} 0 0 0 ${9 *
w /
10} ${5 * h / 10} A${4 * w / 10},${4 * h / 10} 0 0 0 ${w / 10} ${5 *
h /
10} A${4 * w / 10},${4 * h / 10} 0 0 0 ${9 * w / 10} ${5 * h / 10} A${4 *
w /
10},${4 * h / 10} 0 0 0 ${w / 10} ${5 * h / 10}`;

thePath.setAttributeNS(null, "d", d);
let path_length = thePath.getTotalLength();


//begin at a bigger size than needed
let font_size = 100;
ellipse.style.fontSize = font_size+"px";

// while the text length is bigger than half path length
while(tp.getComputedTextLength() > path_length / 2 ){
//reduce the font size
font_size -=.25;
//reset the font size
ellipse.style.fontSize = font_size+"px";
}
}



window.setTimeout(function() {
Init();
window.addEventListener("resize", Init, false);
}, 15);

let so = 0;

function Marquee() {
requestAnimationFrame(Marquee);
tp.setAttributeNS(null, "startOffset", so + "%");
if (so >= 50) {
so = 0;
}
so += 0.02;
}

Marquee();
html, body {
margin: 0;
height: 100%;
width: 100%;
}

body {
font-family: "Arimo", sans-serif;
}

#wrap{
width:100%;
height:100%;
position: fixed;
top: 0;
left: 0;
}
text {
text-transform: uppercase;
font-weight: lighter;
}
<div id="wrap">
<svg id="ellipse" version="1.1" viewBox="0 0 1000 1000">
<path id="thePath" fill="transparent" d="M100,500A400,400 0 0 0 900 500 A400,400 0 0 0 100 500" />

<text stroke="black">
<textPath xlink:href="#thePath" dy="5" id="tp" lengthAdjust="spacingAndGlyphs">Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon •</textPath>
</text>
</svg>
</div>

最佳答案

正如我所评论的,您需要改变路径。由于路径由脚本控制,因此您需要更改函数 Init 中 d 变量的值

function Init() {
let w = wrap.clientWidth;
let h = wrap.clientHeight;
ellipse.setAttributeNS(null, "viewBox", `0 0 ${w} ${h}`);
let d = `M${9*w / 10},${h / 2}
A${4 * w / 10},${4 * h / 10} 0 0 1 ${w / 10} ${5 * h / 10}
A${4 * w / 10},${4 * h / 10} 0 0 1 ${9 * w / 10} ${5 * h / 10}
A${4 * w / 10},${4 * h / 10} 0 0 1 ${w / 10} ${5 * h / 10}
A${4 * w / 10},${4 * h / 10} 0 0 1 ${9 * w / 10} ${5 * h / 10} `;

thePath.setAttributeNS(null, "d", d);
let path_length = thePath.getTotalLength();


//begin at a bigger size than needed
let font_size = 100;
ellipse.style.fontSize = font_size+"px";

// while the text length is bigger than half path length
while(tp.getComputedTextLength() > path_length / 2 ){
//reduce the font size
font_size -=.25;
//reset the font size
ellipse.style.fontSize = font_size+"px";
}
}



window.setTimeout(function() {
Init();
window.addEventListener("resize", Init, false);
}, 15);

let so = 0;

function Marquee() {
requestAnimationFrame(Marquee);
tp.setAttributeNS(null, "startOffset", so + "%");
if (so >= 50) {
so = 0;
}
so += 0.02;
}

Marquee();
html, body {
margin: 0;
height: 100%;
width: 100%;
}

body {
font-family: "Arimo", sans-serif;
}

#wrap{
width:100%;
height:100%;
position: fixed;
top: 0;
left: 0;
}
text {
text-transform: uppercase;
font-weight: lighter;
}
<div id="wrap">
<svg id="ellipse" version="1.1" viewBox="0 0 1000 1000">
<path id="thePath" fill="transparent" />

<text stroke="black">
<textPath xlink:href="#thePath" dy="5" id="tp" lengthAdjust="spacingAndGlyphs">Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon •</textPath>
</text>
</svg>
</div>

另请阅读相关博文:https://codepen.io/enxaneta/post/animate-marquee-on-svg-curve

更新

OP 正在询问;

Is there anyway to make the svg spin anti clockwise

我不太清楚他的意思,因为原始演示是逆时针旋转的。请尝试像这样更改 function Marquee():不要增加 startOffset,而是减少它。

let so = 50;

function Marquee() {
requestAnimationFrame(Marquee);
tp.setAttributeNS(null, "startOffset", so + "%");
if (so <= 0) {
so = 50;
}
so -= 0.02;
}

Marquee();

关于html - 在 SVG 的 textPath 元素内翻转文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67076699/

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