css - 使用 CSS 控制 SVG 图像在网页上的位置

Question

我正在处理 SVG 绘图。这是由另一位开发人员创建并交付给我以供在网站上使用的。

它使用raphael.js矢量图形库来绘制 map 和动画。

用两行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);

这会生成具有相同 ID 的 2 个 div，而这不是您要找的 :)。

你应该删除这个:

// 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);