16

私のSVGには、ap要素を含むforeignObjectがあります。この構造の高さをテキストの高さに合わせたいと思います。

p 要素は既に適応されています。そのために何もしていません。

しかし、foreignObject には問題があります。フィールドの高さを削除すると、機能しません。height:auto も機能しません。

4

2 に答える 2

10

foreignObject要素の高さをem単位で設定できます。

現在、 a のwidthおよびheight属性foreignObjectが必須であり、値 > 0 である必要があります。そうでない場合、要素はレンダリングされません。

更新:代わりに、foreignObject のサイズを 100% に設定し、foreignObject の背景がデフォルトで透明であるという事実を利用することもできます。とにかく、svg の他の要素は絶対的な方法で配置されるため、foreignObject のサイズに依存しません。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    p { position: absolute; top: 50%; left: 50%; width: 100px; }
  </style>

  <circle cx="50%" cy="50%" r="25%" fill="lightblue"/>

  <foreignObject width="100%" height="100%">
    <p xmlns="http://www.w3.org/1999/xhtml">
        some wrapped text...
        some wrapped text...
        some wrapped text...
        some wrapped text...
    </p>
  </foreignObject>
</svg>
于 2013-04-29T09:11:16.413 に答える