锁定元素到 SVG 元素

Posted 2023-03-06

【中文标题】锁定元素到 SVG 元素

【英文标题】：lock element to the SVG element

【发布时间】：2016-08-20 16:53:51

【问题描述】：

我有以下手机的 SVG：

<svg   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- 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- fill="white" sketch:type="MSShapeGroup"></path>
        <rect id="screen" fill="#ddd"
              sketch:type="MSShapeGroup" x="9" y="36"  ></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 元素动态定位为仅在手机屏幕上？

附：我可以看到我的 SVG 包含 id 为 screen 的元素，所以可能以某种方式检测到该元素的位置？

【参考方案1】：

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

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

【参考方案2】：

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

var ui = document.getElementById("ui");
var screen = document.getElementById("screen");
var dimensions = screen.getBoundingClientRect();

ui.style.left = dimensions.left + "px";
ui.style.top = dimensions.top + "px";
ui.style.width = dimensions.width + "px";
ui.style.height = dimensions.height + "px";

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