[英]SVG <textPath> not showing up (with ReactJS)
我無法使<textPath>
遵循我的SVG路徑。 我在控制台中看到這個是0x0,但是我無法更改它。 我也有一個font-size: 4vw
中有#svg_text
所以我真的不知道發生了什么。
這是我的JavaScript代碼:
return(
<div key={i*3} id="svg_container">
<svg
viewBox="0 0 1532.82 818.45"
id="svg">
<path d="M1716,795.37C1392.31,283.32,716.07,130.88,204,454.54"
transform="translate(-203.18 -283.05)"
fill="transparent" stroke="#000"/>
<text id="svg_text">
<textPath xlinkHref="#curve">
this is a test - this is a test
</textPath>
</text>
</svg>
</div>
)
} })
這是我的CSS代碼:
#svg_container{
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
#svg {
width: 80vw;
height: 80vh;
}
#svg_text{
font-size: 4vw;
font-family: Dia-Bold;
color: white;
}
任何幫助將不勝感激。
嘗試這個。 看起來React不支持textPath,所以你可以做的是
const textPath = `<textPath xlinkHref="#curve">
this is a test - this is a test
</textPath>`;
<text id="svg_text" dangerouslySetInnerHTML={{__html: textPath }}></text>
在根svg元素處為svg和xlink添加xmlns,如下所示
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 1532.82 818.45" id="svg">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.