鎖元素的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元素

回答

相關問題