时间戳

首页 > 解决方案 > 在javascript中设置svg元素的位置时，如何做“px”？

javascript - 在javascript中设置svg元素的位置时，如何做“px”？

问题描述

假设你有一个简单的全屏 div

<body>
<div id="wrapper">
</div>
</body>

和

* { margin:0; padding:0; }
html, body { width:100%; height:100%; } /* ensure full screen*/
<style>
    div {
        display: block; width: 100%; height: 100%; margin: 0;
    }
</style>

然后在javascript中

var wrapper = document.getElementById('wrapper')
var svgns = "http://www.w3.org/2000/svg"

如果你想在屏幕上添加一个 svg 点，你会：

(A) 制作一个 svg 元素（为方便起见，我们将使其与圆本身的大小相同，例如 20.20）

console.log("making new dot at 313.172")

onedot = document.createElementNS(svgns, 'svg')
onedot.setAttribute('width', 20)
onedot.setAttribute('height', 20)

onedot.style.position = 'absolute'
onedot.style.left = 312
onedot.style.top = 172

(B) 在元素内部，只需添加一笔，即圆形。

var cc = document.createElementNS(svgns, "circle")
cc.setAttribute("cx", 10)
cc.setAttribute("cy", 10)
cc.setAttribute("r", 10)
cc.setAttribute("fill", "blue")

onedot.appendChild(cc)

wrapper.appendChild(onedot)

这似乎工作正常。你现在可以到处乱画点了：

在此处输入图像描述

我的问题，在这里你正在处理“现实世界”，可以说是价值观，而不仅仅是古怪的 svg 空间的东西：

onedot.style.position = 'absolute'
onedot.style.left = 312
onedot.style.top = 172

这是在 div 中进行的。

在我对 DOM、HTML 等的有限理解中，指定诸如“px”之类的值真的很重要

如何在那里指定px？

有办法吗？

标签： javascriptsvg

解决方案

onedot.style.position = 'absolute'
onedot.style.left = 312
onedot.style.top = 172

改成

onedot.style.position = 'absolute';
onedot.style.left = '312px'; // both are oke
onedot.style.top = 172+'px'; // is ok to

推荐阅读