將文字放置在svg多邊形內

我有一個三角形形狀的多邊形。但多邊形內部的文本不是正在渲染。任何幫助表示讚賞。這是我到目前爲止所嘗試的，我無法弄清楚爲什麼文本沒有渲染。我真的可以用這樣的點在多邊形內放置文本嗎？將文字放置在svg多邊形內

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 64 64"> 
<polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4 4,60 60,60"/><polygon> 
<text x="10" y="14" text-anchor="middle" fill="white" font-size="10"></text>

在此先感謝。

來源

2017-10-12 Ramji Seetharaman

有許多與你的SVG的問題。

在<polygon>的points屬性是格式不正確。它缺少逗號。
您在該行末尾有一個流浪<polygon>標記。
您的<text>元素中沒有文字。
文字的位置不在多邊形上。白色背景上的白色文字將隱藏。
我還增加了font-size，以便文本可見。

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 64 64"> 
 
    <polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4,4,60,60,60"/> 
 
    <text x="32" y="50" text-anchor="middle" fill="white" font-size="30">X</text> 
 
</svg>

來源

2017-10-12 13:30:34

你是最棒的！ –

-1

元素編碼的順序決定了它們的深度順序。在文本標籤之間添加文本，然後將文本放置在多邊形之前。如果讓文本變成另一種顏色，它可能會更容易。

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 64 64"> 
<text x="10" y="14" text-anchor="middle" fill="red" font-size="10">text</text> 
<polygon fill="#F3BC23" stroke="#F3BC23" stroke-width="1" points="30,4 4,60 60,60"/><polygon>

來源

2017-10-12 06:14:06 AstroBoogie

您可以使用<text>

這裏是你的代碼

來源

2017-10-12 06:18:08

將文字放置在svg多邊形內

回答

相關問題