Question

所以我刚刚进入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);
}

JSFiddle

现在，由于Google Chrome上的用户代理样式表包含＆＃34;溢出：隐藏＆＃34;因此，使用该CSS代码肯定不会被裁剪。关于SVG。但这真的是解决问题的正确方法吗？另外，为什么它被裁剪而不是缩放？我应该＆＃34;画＆＃34;我的svgs使用百分比而不是像素？

Answer 1

您目前尚未设置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%;
}

Fiddle

Answer 2

SVG的默认宽度和高度（300px x 150px）。如果您的元素大于SVG帧，则它们不可见。根据您的方便设置SVG的宽度和高度：

例如：https://jsfiddle.net/4yjtbun9/

<svg id="svg" width="520" height="210" ...

SVG被裁剪了

2 个答案: