Question

有没有办法 - 最好不使用JavaScript - 使用foreignObject将一些HTML内容放入SVG形状，这样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>

Answer 1

不使用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>

Answer 2

一个不错的技巧是将所有内容包装在<g>元素中，然后使用getBBox()测量该元素，然后知道内部内容的高度，并可以用来修改父元素< strong> SVG 元素的高度。

var svg = document.querySelector('svg');
var bbox = svg.firstElementChild.getBBox();

svg.setAttribute("height", bbox.height + "px");

<svg>
  <g>
    <rect x="10" y="10" width="100" height="200px" fill="red"></rect>
        <foreignObject x="10" y="500" position="absolute" width="100%" height="100%">
            <div id="myDiv" style="display: inline-block;">Some HTML text that resizes its SVG container</div>
        </foreignObject>
        <text dy='500'>aaaaaaaaa</text>
  </g>
</svg>

缩放SVG形状以适合内容，其中内容包括foreignObject

2 个答案: