8

foreignObjectSVG 形状がコンテンツに合わせて自動サイズ変更 (またはスケーリング) されるように、JavaScript を使用せずに、HTML コンテンツを SVG 形状に配置する方法はありますか?

つまり、この疑似コードの例に非常に漠然と似ていますが、有効であり、私が説明した方法で機能します。

<?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>
4

2 に答える 2

3

JavaScript を使用しないと、それを行う方法はありません。実際、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-19T14:56:37.107 に答える