使用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;而且我至少进入了正确的区域。