SVG被裁剪了。

Question

SVG被裁剪了。

6

我最近开始学习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"。但这真的是解决问题的正确方法吗？此外，为什么它会被裁剪而不是缩放？我应该使用百分比而不是像素来"绘制"我的SVG吗？

- Hissvard

2个回答

1

SVG有默认的宽度和高度（300px x 150px）。如果您的元素比SVG框架大，则它们将不可见。请根据需要设置SVG的宽度和高度：

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

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

- CoderPi

我尝试过，但它只改变了容器的尺寸，里面的任何内容都没有设置viewBox，就像Sirko所说的那样。无论如何，还是感谢您的回答！ - Hissvard

我认为这里的问题是你正在调整容器大小以适应形状，而不是使svg调整大小以适应容器，这可以使用viewBox来实现。 - Ian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sirko · Accepted Answer

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