SVG 被裁剪

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

现在，使用 CSS 代码肯定不会再裁剪了，因为 Google Chrome 上的用户代理样式表包含有关 SVG 的 "overflow:hidden"。但这真的是解决问题的正确方法吗？另外，为什么它会被裁剪而不是缩放？我应该 "draw" 我的 svgs 使用百分比而不是像素吗？

Answer 1

SVG 具有默认的宽度和高度 (300px x 150px)。如果您的元素大于 SVG 框架，它们将不可见。根据您的方便设置 SVG 的宽度和高度：

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

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

Answer 2

您目前尚未设置 SVG 的固有尺寸。您应该添加一个 viewBox 属性来指定您实际想要显示的 SVG 部分。（"complete" SVG plain 几乎无穷无尽）

此外，您还可以设置 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

SVG 被裁剪

SVG gets cropped

javascript

html

svg

snap.svg