我正在动态生成一些 SVG。我想要做的是将页面分成两半(无论大小如何),并能够在屏幕左侧插入一些对象,在屏幕右侧插入一些对象。我似乎无法把它做好。我实际上尝试过很多不同的方法,这里列出的代码是我最近的尝试:
<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>
当然,我更改了一些代码以使这篇文章更加简洁。它的作用是,当用户单击文本时,它会根据增量 (i) 是偶数还是奇数在元素“screenLeft”或“screenRight”中绘制一个矩形。
我现在的 viewBox 设置方式是有效的。如果我将 Chrome 窗口缩小到较小的尺寸,“左侧”和“右侧”之间的间隙确实会变小。但是,如果我将窗口最大化,则屏幕区域太大。我必须向右滚动很远才能看到“右侧”。它大约是我屏幕尺寸的两倍。
我还尝试了其他几种方法,包括分组。
所以,我想我的问题是,将屏幕分成两半的最佳方法是什么,以便我可以在屏幕左侧生成一些对象,在屏幕右侧生成一些对象,同时允许整个屏幕大小不同?
最佳答案
给你的<svg>
元素a viewBox
具有固定的宽度和特殊的高度。然后指定 preserveAspectRatio
值为 xMidYMid slice
的属性.
这将确保 SVG 视口(viewport)的整个宽度始终覆盖 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>
观看直播:http://phrogz.net/svg/half-width.svg
唯一的缺点(我不知道这对你是否重要)是调整浏览器窗口的大小将调整元素的大小。也许您希望元素在屏幕上始终保持相同的大小,无论浏览器有多大?
关于javascript - 在页面左侧或右侧显示 SVG 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9180078/