锁元素的SVG元素

我有一个电话下面SVG：锁元素的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尺寸会适应实际的窗口大小。

有没有办法如何动态poisition我div元素只有在手机的屏幕上？

P.S.我可以看到我的SVG包含编号为screen的元素，因此可能以某种方式检测到此元素的位置？

来源

2016-04-26 Robert J.

我会建议将绝对定位div在SVG元素。您可以使用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/

来源

2016-04-26 20:45:08 Duopixel

只是完美！谢谢！ –

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

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

来源

2016-04-26 17:47:35

锁元素的SVG元素

回答

相关问题