SVGサークルの中心テキスト

ここで提供されているさまざまなソリューションをStackOverflowでチェックしましたが、このような問題はありません。私の人生にとって、私は何がうまくいかないのか分からない。SVGサークルの中心テキスト

「なぜSVGを使うのか」と疑問に思われるかもしれません。 HTMLでサークルを作成し、それをバナーの上に配置する必要があります。クライアント向けです。私は、SVGシェイプを作成することが、そのようなサークルを作成するための最良の方法であることを発見しました。これは私の現在のSVGです：

<svg xmlns="http://www.w3.org/2000/svg"> 
<circle cx="40" cy="40" r="40" fill="#472e12" /> 
    <foreignobject x="20" y="20" width="20" height="20"> 
    <style> 
     p { text-anchor:middle;} 
    </style> 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
    <div> 
     <p>Text in two lines</p> 
    </div> 
    </body> 
</foreignobject> 
    </svg>

そして、ここではそれのためのCSSです：

svg{ 
     position: absolute; 
     left: 20px; 
     bottom: 40px; 
    }

それは小さな茶色の円であり、それは白で、二行、中心にテキストを持っている必要があります。

出典

2017-06-25 vester

あなたは以上の2行が必要ですか？ – JSmith

いいえ、わずか2つです。私は最初の行に単語を、2行目にもう一つの単語を置く必要があります。 – vester

私にそれを見せてください – JSmith

テキストを複数の行にまたがるようにするには、<tspan>を使用する必要があります。テキストを白にするには、strokeまたはfillを#fffにする必要があります。私はそれをシャープにするためにfillに行きました。テキスト自体については、あなたはそれが簡単だけ<text>を使用することを見つけて、次のような何かをすることがあります。

<svg width="200" height="100"> 
 
    <circle cx="40" cy="40" r="40" fill="#472e12" /> 
 
    <text x="50%" y="30%" text-anchor="middle" fill="#fff" dy=".3em"> 
 
    <tspan x="20%" dy=".6em">Text In</tspan> 
 
    <tspan x="20%" dy="1.2em">Two Lines</tspan> 
 
    </text> 
 
</svg>

・ホープ、このことができます！ :)

出典

2017-06-25 22:53:10

いいです。文字列をより鮮明にするために、ストロークではなく 'fill ="＃fff "を使用したいかもしれません... –

代わりに' fill'を使用するように更新されました:) –

これは魅力的でした！そんなにありがとう。私が持っている質問は、なぜY軸に50％の代わりに30％がありますか？これは私が推測する最も論理的なものだと思いますか？ – vester

ここでyの位置はの属性に大きく依存します。

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="40" cy="40" r="40" fill="#472e12" /> 
 
    <text x="40" y="40" fill="#FFF" font-size="20px" text-anchor="middle" > 
 
     1 line 
 
    </text> 
 
    <text x="40" y="60" fill="#FFF" font-size="20px" text-anchor="middle"> 
 
     2 line 
 
    </text> 
 
</svg>

出典

2017-06-25 23:20:14 JSmith

これも機能しました！ありがとう、あなた。私は外国人の客が私をhahaを殺したと思う – vester

それがあなたを助けた限り問題はない、私は幸せだ – JSmith

SVGサークルの中心テキスト

答えて

関連する問題