74

箱のサイズはわかっています。テキスト文字列の長さが不明です。縦横比を損なうことなくテキストをボックスに合わせます。

ここに画像の説明を入力

SVG仕様をグーグルで調べて読んだ夜の後、これはJavaScriptなしでは不可能だと確信しています。私が得ることができる最も近いのはtextLength、lengthAdjustテキスト属性を使用することでしたが、それはテキストを1つの軸に沿ってのみ引き伸ばします.

<svg width="436" height="180"
    style="border:solid 6px"
    xmlns="http://www.w3.org/2000/svg">
    <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
</svg>

ここに画像の説明を入力

コンテナーに合わせてテキストをボックスに合わせ、テキストをボックスに合わせる SVG Scaling Text を認識しています。

4

4 に答える 4

18

まず第一に、答えがあなたのニーズに正確に対応していないことがわかりました-それはまだオプションである可能性があるので、ここに行きます:

あなたは、svg がワードラップを直接サポートしていないことを正しく観察しています。ただし、foreignObjectワード ラッピングが可能な xhtml フラグメントのラッパーとして機能する要素を使用すると、メリットが得られる場合があります。

この自己完結型のデモ (オンラインで入手可能) をご覧ください。

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15430189/pure-svg-way-to-fit-text-to-a-box  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 500 500"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
  <title>simulated wrapping in svg</title>
  <desc>A foreignObject container</desc>

   <!-- Text-Elemente -->
   <foreignObject
      x="100" y="100" width="200" height="150"
      transform="translate(0,0)"
   >
      <xhtml:div style="display: table; height: 150px; overflow: hidden;">
         <xhtml:div style="display: table-cell; vertical-align: middle;">
            <xhtml:div style="color:black; text-align:center;">Demo test that is supposed to be word-wrapped somewhere along the line to show that it is indeed possible to simulate ordinary text containers in svg.</xhtml:div>
         </xhtml:div>
      </xhtml:div>
   </foreignObject>

  <rect x="100" y="100" width="200" height="150" fill="transparent" stroke="red" stroke-width="3"/>
</svg>

于 2013-03-19T11:27:53.487 に答える