将元素锁定到SVG元素

Question

我有以下手机SVG：

<svg width="897px" height="452px" viewBox="0 0 897 452" version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <g id="iphone" sketch:type="MSLayerGroup" stroke="#7E89A3" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M130,257.964 C130,266.797 122.809,273.956 113.938,273.956 L16.063,273.956 C7.192,273.956 0.001,266.797 0.001,257.964 L0.001,16.073 C0.001,7.24 7.192,0.081 16.063,0.081 L113.938,0.081 C122.809,0.081 130,7.24 130,16.073 L130,257.964 L130,257.964 Z"
              id="bezel" stroke-width="2" fill="white" sketch:type="MSShapeGroup"></path>
        <rect id="screen" fill="#ddd"
              sketch:type="MSShapeGroup" x="9" y="36" width="111.93" height="199.084"></rect>
        <path d="M77,25.746 C77,26.381 76.561,26.893 76.02,26.893 L55.918,26.893 C55.376,26.893 54.938,26.38 54.938,25.746 L54.938,23.166 C54.938,22.531 55.377,22.019 55.918,22.019 L76.02,22.019 C76.561,22.019 77,22.532 77,23.166 L77,25.746 L77,25.746 Z" id="speaker"
              sketch:type="MSShapeGroup"></path>
        <circle id="camera" sketch:type="MSShapeGroup" cx="66" cy="12" r="3"></circle>
        <ellipse id="lock" sketch:type="MSShapeGroup" cx="65.04" cy="254.001" rx="10.04" ry="10.001"></ellipse>
    </g>
</svg>

如下所示：

我将使用AngularJS动态生成<ul>电话屏幕上的元素，其中生成的元素将是交互式的（用户可以例如点击它们）。

然而，挑战是，如何锁定div元素（将保存ul元素）的大小，以便它始终具有屏幕的大小？我希望这款手机在我的页面上居中对齐，但据我所知，SVG尺寸将适应实际的窗口尺寸。

有没有办法如何动态地将我的div元素置于电话屏幕上？

P.S。我可以看到我的SVG包含id为screen的元素，所以可能会以某种方式检测到这个元素的位置？

Answer 1

我建议在SVG元素上放置一个绝对定位的Panel。您可以使用div方法计算屏幕图像的尺寸。代码很简单：

getBoundingClientRect()

您可以在此处查看一个有效的示例：https://jsfiddle.net/hxe9nb3n/

Answer 2

首先，它不必适应窗口的大小。这种行为在你的控制之下。

或者，您可以使用<foreignObject>元素将HTML嵌入到SVG中。这样嵌入式HTML将适应SVG变成的任何大小。在SO中有很多如何做到这一点的例子。