用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 div具有相同的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本身的位置：relative，left：1050，bottom：909;而且我至少进入了正确的领域。