Javascript 在页面的左侧或右侧显示SVG对象
我正在动态生成一些SVG。我想做的是将页面分成两半(无论大小),并能够在屏幕左侧插入一些对象,在屏幕右侧插入一些对象。我好像就是做不好。实际上,我尝试了许多不同的方法,这里列出的代码是我最近的一次尝试:Javascript 在页面的左侧或右侧显示SVG对象,javascript,svg,Javascript,Svg,我正在动态生成一些SVG。我想做的是将页面分成两半(无论大小),并能够在屏幕左侧插入一些对象,在屏幕右侧插入一些对象。我好像就是做不好。实际上,我尝试了许多不同的方法,这里列出的代码是我最近的一次尝试: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> <script type="text/ecmasc
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<script type="text/ecmascript">
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var i = 0;
function makeBox() {
i++;
var newRect = document.createElementNS(svgNS,"rect");
newRect.setAttributeNS(null,"width", 100);
newRect.setAttributeNS(null,"height", 100);
newRect.setAttributeNS(null, "x", 10);
newRect.setAttributeNS(null, "y", i * 100);
newRect.setAttributeNS(null,"fill","blue");
if(i % 2 === 1) {
document.getElementById("screenLeft").appendChild(newRect);
} else {
document.getElementById("screenRight").appendChild(newRect);
}
}
</script>
<g id="firstGroup">
<text x="20" y="30" onclick="makeBox()" font-size="+13px">Click this text to Draw a Box.</text>
</g>
<svg id="screenLeft" viewBox="50% 100%">
</svg>
<svg id="screenRight" viewBox="50% 100%" x="50%">
</svg>
</svg>
var svgNS=”http://www.w3.org/2000/svg";
var xlinkNS=”http://www.w3.org/1999/xlink";
var i=0;
函数makeBox(){
i++;
var newRect=document.createElements(svgNS,“rect”);
newRect.setAttributeNS(空,“宽度”,100);
newRect.setAttributeNS(空,“高度”,100);
newRect.setAttributeNS(null,“x”,10);
newRect.setAttributeNS(null,“y”,i*100);
newRect.setAttributeNS(null,“fill”,“blue”);
如果(i%2==1){
document.getElementById(“screenLeft”).appendChild(newRect);
}否则{
document.getElementById(“screenRight”).appendChild(newRect);
}
}
单击此文本可绘制一个框。
当然,为了使这篇文章更简洁,我修改了一堆代码。它所做的是,当用户单击文本时,它在元素“screenLeft”或“screenRight”中绘制一个矩形,这取决于增量(i)是偶数还是奇数
我现在设置viewBox的方式很管用。如果我将chrome窗口缩小到较小的尺寸,“左侧”和“右侧”之间的间隙确实会变小。然而,如果我把窗口最大化,屏幕区域就太大了。我必须向右滚动很远才能看到“右侧”。它大约是我屏幕大小的两倍
我还尝试了其他几种方法,包括分组
所以,我想我的问题是,什么是将屏幕一分为二的最佳方法,这样我可以在屏幕左侧和右侧生成一些对象,同时允许总屏幕大小不同?给你的
元素一个固定宽度和异常高度的元素。然后指定一个值为xMidYMid-slice
的属性
这将确保SVG视口的全宽始终覆盖viewBox,因此viewBox的一半将覆盖屏幕的一半
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-100 -1000 200 2000" preserveAspectRatio="xMidYMid slice">
<style type="text/css"><![CDATA[
rect { stroke:red }
text { text-anchor:middle; font-size:8px }
]]></style>
<rect x="-100" y="-1000" width="100" height="2000" fill="lightblue" />
<rect x="0" y="-1000" width="100" height="2000" fill="yellow" />
<text x="-50" y="0">Left Side</text>
<text x="+50" y="0">Right Side</text>
</svg>
左侧
右侧
现场观看:
这样做的唯一缺点(我不知道这对您是否重要)是调整浏览器窗口的大小将调整元素的大小。也许您希望无论浏览器有多大,屏幕上的元素始终保持相同的大小?这似乎达到了我认为您想要的效果,您需要决定的唯一一件事是希望纵横比如何影响您的显示。。。我故意不调整右侧的纵横比,以便您可以看到差异
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<svg width="50%" viewBox="0 0 100 100" preserveAspectRatio="none">
<rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/>
</svg>
<svg x="50%" width="50%" viewBox="0 0 100 100" >
<rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
<rect x="80%" y="10%" width="10%" height="50%" fill="green"/>
<rect x="10" y="10" width="70" height="40" fill="gray"/>
</svg>
旁注:我认为在SVG标记中混合JS处理程序是维护和开发的麻烦。我建议您不要在标记中放置
onclick
属性,而是以编程方式将处理程序作为代码的一部分分配给元素<代码>myText.addEventListener('click',makeBox,false)代码>嗯,我想我希望对象根据浏览器的大小改变大小。但是现在你提到了,也许这对动态绘制东西来说不是一件好事。我想我对这方面的了解还不够,还不知道其中的含义。所以,在我更多地参与我的小项目之前,我不会知道。谢谢你的帮助!“我现在就要试一下了。”@Phrogz,我使用了与你相同的代码,但有一些小改动。整个代码请看这把小提琴。1) 使用viewBox=“0 0 200 2000”代替viewBox=“-100-1000 200 2000”。2) 相应地更改了左栏、右栏坐标。请让我知道,如果有任何特殊原因使用这样的视口坐标(负数)。正如小提琴代码所示,同样的效果也是可以实现的。@rajkamal不,没有理由。我有时更喜欢在屏幕的中央有0,0,这样左右之间的差值正好是±相同的数字。耸肩