0

SVG 画像のテーブルを作成したい。以下のコードは Firefox では問題なく動作し、テーブル セルのサイズに合わせて拡大する 2 つの隣接する黒い正方形を作成しますが、Chrome では、svg 画像はテーブル セル内の小さなものです。

私は何かばかげたことをしていますか？テーブルに適切に収まるようにSVGをスケーリングするポータブルな方法はありますか?

<table width="800" height="400" border="1" cellpadding="0" cellspacing="0">
<tr>
 <td>
  <svg viewBox="0 0 220 220"><rect width="220" height="220"/>
  </svg>
 </td>
 <td>
  <svg viewBox="0 0 220 220"><rect width="220" height="220"/>
  </svg>
 </td>
</tr>
</table>
4

1 に答える 1

2

この例のように、svg の幅/高さの絶対値を使用することだけがある程度ポータブルな方法のようです: http://jsfiddle.net/Rd7ed/1/。

svg { 
    width: 100px;
    height: 100px;
    display: block;
}

しかし、Chrome では、上記により境界線がテーブルの周りに完全に描画されないようです (おそらくバグ)。

代わりにパーセンテージの幅と高さを使用します: http://jsfiddle.net/Rd7ed/ (これは Chrome では正しく機能しません。これはおそらく別のバグです)。

おそらく、代わりに 1 つの svg を使用し、テーブルをまったく使用できないでしょうか?

于 2012-12-01T15:45:58.617 に答える