如何使用html div將svg放在另一個svg中？

小丑SVG是其中假定在後臺的中心爲中心的div minHand：另一個SVG稱爲回clockBack DIV。

但是，當調整窗口大小時，小丑看起來像在身體的中心。有什麼辦法可以將小丑（minHand）置於背部中央（clockBack）？任何意見，歡迎和讚賞。

clown.svg，https://app.box.com/s/x77ydnb9p293w7lyxuqw34p3l4uusv0w

back.svg，https://app.box.com/s/e3dkxqsewz09bc3pq1jqxksmyd53ud09

代碼結構是這樣，

<html> 
<?xml version="1.0" encoding="utf-8"?> 
<div id="clockBack"> 

<div id="minHand"> 
</div><!--minHand--> 



</div><!--clockBack--> 

<style> 

body{ 
    background-color:yellow; 
} 
#clockBack{ 
    background-image: url(back.svg), none;   
    z-index:-1; 
    display:block; 
    margin:auto; 
    width:70%; 
    height:70%; 
} 
#minHand{ 
    background-image: url(clown.svg), none; 
    width:20%; 
    height:20%; 
    position: absolute; 
    z-index:2; 
    top:70%; 
    left:50%; 
} 

</style> 


</html>

來源

2017-02-25 Yu Fang

添加的位置是：相對於＃ clockBack。
然後將頂部和左側50％添加到#minHand，並將變換：平移（-50％，-50％）以使其垂直和水平居中。

中看到結果codepen.

#clockBack{ 
    z-index:-1; 
    display:block; 
    margin:auto; 
    width:70%; 
    height:70%; 
    position: relative; 
} 
#minHand { 
    width:20%; 
    height:20%; 

    z-index:2; 

    position: absolute; 
    top:50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
}

來源

2017-02-25 07:24:24

如何使用html div將svg放在另一個svg中？

回答

相關問題