0

svg を手作業でコーディングして、いくつかのポインターを作成しています。100x100 の正方形のポイントを使用してポリゴンを定義し、外側の SVG 要素の幅と高さの属性を設定して、必要な縦横比を取得しました。グラフィックの jsfiddle は次のとおりです: http://jsfiddle.net/62WpR/。

残念ながら、テキストは幅と高さの属性によって圧縮されています。テキストを圧縮したり、変換を適用するような愚かなことをしたりせずにこれらを使用する方法はありますか?

これが不可能な場合は、希望する最終的な縦横比で座標空間にパスを定義する必要があると思います。残念です。

4

1 に答える 1

0

なんとか解決しました。

ビューボックスを 1:2 の比率に設定し、SVG 内の両方のポリゴンに変換を使用することで、必要な寸法を得ることができました。CSS の寸法が 2:1 の比率に設定されている限り、グラフィックは正しく表示されます。

また、preserveAspectRatio プロパティを慎重に使用して、画像を同じ縦横比に保ちました。CSS で幅のみを設定しています: http://jsfiddle.net/62WpR/3/

<svg baseProfile="full" contentScriptType="text/ecmascript" contentStyleType="text/css" id="svg" preserveAspectRatio="xMinYMin meet" version="1.2" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(1 .5)" stroke-linejoin="bevel" stroke="black">
       <polygon vector-effect="non-scaling-stroke" fill="#666" id="tab" points="20.0,95.0 5.0,50.0 20.0,5.0 90.0,5.0 95.0,15.0 95.0,85.0 90.0,95.0"></polygon>
       <polygon vector-effect="non-scaling-stroke" fill="#FFEA00" id="insert" points="25.0,95.0 10.0,50.0 25.0,5.0" visibility="visible"></polygon>
  </g>                                    
  <text fill="white" font-size="30" text-anchor="middle" x="60" y="36">999</text>
</svg>​
于 2012-09-15T17:29:58.037 に答える