3 
<div style="float: left; padding: 10px; border: 1px solid; 
background: #ccc">random text</div>

SVGでこのようなことを達成する方法はありますか? 私は長方形とテキストを持っていることを意味します:

a) 長方形の幅と高さは動的であるため、テキストを変更すると、長方形のサイズが調整されます
b) 長方形を移動すると、テキストも一緒に移動します

でこのようなことを達成するのは簡単でしょう<canvas>か?

編集：

<defs>       
    <text id="text1" x="90" y="100" style="text-anchor:start;font-size:30px;">
    THIS IS MY HEADER</text>
</defs>

<filter x="0" y="0" width="1" height="1" id="background">
    <feFlood flood-color="gray"/>
    <feComposite in="SourceGraphic"/>
</filter>

<use xlink:href="#text1" fill="black" filter="url(#background)"/>

Erik Dahlström は次のような提案をしました。背景にパディングを配置する方法、追加する方法など。四角形への影または境界線？そして、これは IE9 では動作しないため、受け入れられません。<foreignObject>IEでサポートされていれば使えます。

そして、私の質問のb）ポイントの答えを見つけました。両方の要素をグループに入れる必要があります:

<g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="50" y="50" font-size="14" fill="blue" text-anchor="middle">Hello</text>
</g>

transform次に、 paramを使用してグループを移動できます。

<g transform="translate(x, y)">

すべてのブラウザで正しく動作するようです。

4

2 に答える 2

12

JavaScript を使用してボックスを調整できます。

<svg xmlns="http:/www.w3.org/2000/svg" onload="init()" height="100" width="200">
      <style type="text/css">
        rect {
          stroke:black;
          stroke-width:1;
          fill:#ccc;
        }
      </style>
      <script type="text/javascript">
        var text, rect
        var padding = 10
        function init() {
          text = document.getElementsByTagName("text")[0]
          rect = document.getElementsByTagName("rect")[0]
          adjustRect()
        }
        
        function adjustRect() {
          var bbox = text.getBBox()
          rect.setAttribute("x",bbox.x - padding)
          rect.setAttribute("y",bbox.y - padding )
          rect.setAttribute("width",bbox.width + 2*padding)
          rect.setAttribute("height",bbox.height + 2*padding)
        }
        
      </script>
      <g>
        <rect x="0" y="0" width="100" height="100" fill="red"></rect>
        <text x="50" y="50" font-size="14" fill="blue" text-anchor="middle">Hello</text>
      </g>
    </svg>
    <div>
      <button onclick="text.textContent='Goodbye';adjustRect()">change text</button>
    </div>

于 2012-12-14T06:14:45.467 に答える
1

svgフィルターを使用して背景を描画します。これは、テキストのサイズと位置に適応します。完全な例については、この回答を参照してください。

于 2012-12-13T15:05:28.127 に答える