可能用JS/CSS繪製橢圓形文字？

Question

是否可以使用javascript在HTML5中沿橢圓繪製名稱？我們的目標是能夠像附加圖像一樣沿橢圓上的任意偏移添加名稱。

Answer 1

你可以簡單地使用svg的textPath元素來實現這一目標。

<svg width="300" height="150" viewBox="0 -15 200 130"> 
 
    <path d="M0,50 c0,-65 200,-65 200,0 c0,65 -200,65 -200,0" fill="#645432" /> 
 
    <path id="shape2" d="M0,50 c0,65 200,65 200,0 c0,-65 -200,-65 -200,0" fill="none" /> 
 
    <path id="shape" d="M12,50 c0,-52 180,-52 176,0 c0,52 -180,52 -176,0" fill="#987C54" stroke="#8BAC96" /> 
 
    <text><textPath startOffset="30" xlink:href="#shape">Jonathon</textPath></text> 
 
    <text><textPath startOffset="150" xlink:href="#shape">Sierra</textPath></text> 
 
    <text><textPath startOffset="40" xlink:href="#shape2">Naomie</textPath></text> 
 
    <text><textPath startOffset="170" xlink:href="#shape2">Daniel</textPath></text> 
 
</svg>