1

希望の高さと幅のテキストを取得する必要があります。私はsvgのドキュメントで何かを見つけようとしましたが、見つけただけfont-sizeで、そのような方法でスケールを使用しようとしました:

<text xmlns="http://www.w3.org/2000/svg" id="10996080909940" name="-1"
x="1782.9351809218"   y="-751.796133712862" width="1" height="1" style="font:Arial;text-
anchor:start;stroke:#000000" transform="rotate(0) scale(2 2)"> SOME TEXT </text>

しかし、テキストのサイズが大きすぎて、必要な場所に配置されません。

4

1 に答える 1

1

テキストで任意の幅と高さを正確に埋めたい場合、SVG でそれを行う簡単な方法はありません。<text>要素の幅と高さを指定することはできません。少なくとも現在の SVG 仕様 (1.1) にはありません。

ただし、この効果を実現する方法はいくつかあります。

あなたが提案したように、1つの方法は変換を使用することです：

<svg>

    <text font-size="10px" font-family="Verdana" transform="translate(99,400) scale(3.5,13.7)">SQUASHED TEXT</text>
    <rect x="100" y="300" width="300" height="100" fill="none" stroke="red" />

</svg>

2 番目の方法は、内側の<svg>要素を使用し、テキストの境界に一致するように viewBox を設定することです。次に、 を設定しpreserveAspectRatio="none"ます。

<svg>

    <svg x="100" y="100" width="300" height="100" viewBox="0.2 -7.3 86 7.3" preserveAspectRatio="none" overflow="visible">
       <text font-size="10px" font-family="Verdana">SQUASHED TEXT</text>
    </svg>
    <rect x="100" y="100" width="300" height="100" fill="none" stroke="red" />

</svg>

この方法はより冗長ですが、テキストの一部に適切な viewBox を見つけたら、任意のサイズの四角形に非常に簡単に合わせることができるという利点があります。内側のx、y、widthを長方形のサイズに設定するだけです。height<svg>

デモはこちら: http://jsfiddle.net/ZRgEF/3/

于 2013-10-22T06:55:03.147 に答える