使用CSS控制SVG圖像在網頁上的位置

Question

我正在使用SVG繪圖。這是由另一個開發人員創建的，並提供給我在網站上使用。

它使用raphael.js矢量圖形庫來繪製地圖和動畫。

它插入到網頁中有兩個行JavaScript代碼：

<script type="text/javascript" src="raphael.js"></script> 
<script type="text/javascript" src="maine_map.js"></script> 

我的挑戰是，我不能讓這個SVG文件出現在我需要它的頁面。它需要出現的幻燈片放映此演示頁面右側：

http://owlpress.net/work/

而不是出現在我爲它創建父DIV，它出現在頁面的底部浮動。我已經玩過CSS了，我很難過。如果有人能幫助我指出正確的方向，那將是美好的。

蘇珊

Answer 1

在main_map.js您有：

// Insert the <div> into the body document. 

    document.body.appendChild(div); 

這就是爲什麼它是一切後，產生的原因。

創建自己的div + id和appendChild（）代替body標籤。 DEMO

var apme = document.getElementById('ap'); 
// Create the div we'll be slotting the map into and set it to the correct size. 
var div = document.createElement('div'); 
div.setAttribute('id', "mobilize_maine_map"); 
div.style.width = "200px"; 
div.style.height = "200px"; 
div.style.borderWidth = "1px"; 
div.style.borderColor = "#000"; 
div.style.borderStyle = "solid"; 

// Insert the <div> into the heml document. 
apme.appendChild(div); 

現在，這個div被插入在div＃AP內。這個div可以是你希望在你的標記中的任何地方。

---

<edit> 

你做：

// Create the div we'll be slotting the map into and set it to the correct size. 
var div = document.createElement('div'); 
    div.setAttribute('id', "mobilize_maine_map"); 
    div.style.width = divWidth+"px"; 
    div.style.height = divHeight+"px"; 
// div.style.borderWidth = "0px"; 
// div.style.borderColor = "#000"; 
// div.style.borderStyle = "solid"; 

// Insert the <div> into the heml document. 
document.body.appendChild(div); 

var apme = document.getElementById('map'); 
// Create the div we'll be slotting the map into and set it to the correct size. 
var div = document.createElement('div'); 
div.setAttribute('id', "mobilize_maine_map"); 
div.style.width = "203px"; 
div.style.height = "306px"; 
div.style.borderWidth = "0px"; 
div.style.borderColor = "#000"; 
div.style.borderStyle = "solid"; 

// Insert the <div> into the heml document. 
apme.appendChild(div); 

這使得2格用相同的ID，這是不是你找什麼:)。

您應該已經刪除了：

// Create the div we'll be slotting the map into and set it to the correct size. 
var div = document.createElement('div'); 
    div.setAttribute('id', "mobilize_maine_map"); 
    div.style.width = divWidth+"px"; 
    div.style.height = divHeight+"px"; 
// div.style.borderWidth = "0px"; 
// div.style.borderColor = "#000"; 
// div.style.borderStyle = "solid"; 

// Insert the <div> into the heml document. 
document.body.appendChild(div); 

並將其替換爲：

var apme = document.getElementById('map'); 
// Create the div we'll be slotting the map into and set it to the correct size. 
var div = document.createElement('div'); 
div.setAttribute('id', "mobilize_maine_map"); 
    div.style.width = divWidth+"px"; 
    div.style.height = divHeight+"px"; 

// Insert the <div> into the heml document. 
apme.appendChild(div); 

Answer 2

我試圖在SVG本身的位置是：相對的，左起：1050和底部：909;而且我至少進入了正確的區域。