コンテンツに適合するコンテンツへのSVGシェイプ

foreignObjectを使用していくつかのHTMLコンテンツをSVGシェイプに入れて、SVGシェイプが自動的にサイズ変更（または拡大/縮小）する方法がありますその内容に合うように？コンテンツに適合するコンテンツへのSVGシェイプ

I.e.非常に漠然とこの擬似コード例のようなものが、有効な、と私は説明してきた方法で機能：JavaScriptを使用せずに

<?xml version="1.0" standalone="yes"?> 
<svg xmlns = "http://www.w3.org/2000/svg"> 
    <rect x="10" y="10" width="SCALE_TO_FIT_CONTENTS" height="SCALE_TO_FIT_CONTENTS" fill="gray"> 
    <foreignobject width="100%" height="100%"> 
     <body xmlns="http://www.w3.org/1999/xhtml"> 
     <div>Some HTML text</div> 
     </body> 
    </foreignobject> 
    </rect> 
</svg>

出典

2012-07-08 sampablokuper

あなたは答えとしての例を与えることを100％と高さを親 –

ケアの100％を試してみましたか？私が説明したように動作するなら、私はそれを受け入れられたと喜んでマークします。 – sampablokuper

@sampablokuper何を試しましたか？ – Duopixel

、あなたがそれを行うことができ一切の可能な方法はありません。実際、SVGシェイプはコンテナとして使用できません。しかし、私はこれがあなたが求めているものであると思います：

<script type="text/javascript"> 
    function myFun(){ 
     var w = document.getElementById("myDiv").scrollWidth; 
     document.getElementById("myRect").setAttribute("width",w); 
    } 
</script> 
<svg xmlns = "http://www.w3.org/2000/svg" onload="myFun()"> 
    <rect id="myRect" x="10" y="10" width="0" height="100" fill="red"></rect> 

     <foreignObject x="10" y="10" position="absolute" width="100%" height="100%"> 
      <div id="myDiv" style="display: inline-block;">Some HTML text that resizes its SVG container</div> 
     </foreignObject> 
</svg>

出典

2012-07-19 14:56:37

コンテンツに適合するコンテンツへのSVGシェイプ

答えて

関連する問題