svgポリゴンの内部にテキストを配置

Question

三角形の多角形を持っています。しかし、ポリゴン内部のテキストはレンダリングされません。どんな助けもありがとうございます。これはこれまで私が試したことであり、なぜテキストがレンダリングされないのか理解できません。実際に、このような点でポリゴンの内部にテキストを配置することはできますか？

<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> 

ありがとうございます。

Answer 1

です。

1. <polygon>のpoints属性が正しくフォーマットされていません。コンマがありません。
2. その行末に迷いの<polygon>タグがありました。
3. あなたの<text>要素にはテキストがありませんでした。
4. テキストの位置がポリゴンを超えていませんでした。白い背景の白い文字は見えません。
5. また、テキストが表示されるように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>

Answer 2

要素がコード化されている順序によって、深度の順序が決まります。テキストタグの間にテキストを追加し、ポリゴンの前にテキストを配置します。テキストを別の色にすると、さらに簡単になります。

<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> 

Answer 3

あなたはここに<text>

を使用することができますあなたのコードは、あなたのSVGを持つ多くの問題があります