His*_*ard 5 html javascript svg snap.svg
所以我最近刚进入SVG并且我遇到了一些问题,而不是调整大小以适应容器,而是我的SVG图像被裁剪掉了.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Eye</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/snap.svg.js"></script>
<script src="js/eye.js"></script>
</head>
<body>
<svg id="svg"></svg>
</body>
</html>
JS:
window.onload = function() {
var s = Snap("#svg");
var circle = s.circle(90,120,80);
var square = s.rect(210,40,160,160);
var ellipse = s.ellipse(460,120,50,80);
}
现在,使用CSS代码肯定不会被裁剪,因为Google Chrome上的用户代理样式表包含有关SVG的"溢出:隐藏".但这真的是解决问题的正确方法吗？另外,为什么它被裁剪而不是缩放？我应该使用百分比而不是像素来"绘制"我的svgs吗？
您当前尚未设置 SVG 的固有尺寸。您应该添加一个viewBox属性来指定 SVG 中您实际想要显示的部分。（“完整的”SVG 平原几乎是无穷无尽的）
此外，您还可以设置 SVG 容器的外部尺寸。这是 SVG 将出现在其中的盒子的大小。
放在一起它可能看起来像这样：
<svg id="svg"
version="1.1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 550 300"></svg>
#svg {
overflow: visible;
width: 100%;
}