为什么 SVG 在 Chrome 中被截断？

Question

我对 SVG 了解不多 - 只是想学一点。所以，我去了 Wikipedia SVG Example 并认为 "Oh, can I just embed XML like that in my web page?" 试过了，基本上，是的，你可以，但是我看到的图像是在 Chrome 中渲染的（Windows Enterprise 7 上的版本 45.0.2454.101 m 运行）在 Y=150 标记（维基百科页面网格上的 Y = 150）附近截止。

在 IE 下呈现的同一网页看起来就像维基百科页面上的图像。在 Firefox 下查看的同一网页也被截断，如 Chrome。所以看起来 IE 在这里得到了正确的东西 Chrome 和 Firefox 出错了。

这是我正在查看的网页的全部来源：

<html>
  <head>
    <title>SVG test</title>
  </head>
  <body>

<h1>SVG test</h1>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
  <circle cx="125" cy="125" r="75" fill="orange" />
  <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
  <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>

HTML 没有比这更简单的了。这里的问题是什么？有什么简单的方法可以使 Chrome 和 Firefox 渲染整个图像（即像 IE 一样）？

谢谢！

Answer 1

您需要提供宽度和高度属性（或样式）。没有它，外部 <svg> 元素的大小默认为 300 x 150px。

html, body {
  width: 100%;
  height: 100%;
}

<html>
  <head>
    <title>SVG test</title>
  </head>
  <body>

<h1>SVG test</h1>

<svg width="100%" height="100%">
  <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
  <circle cx="125" cy="125" r="75" fill="orange" />
  <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
  <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>

在这种情况下，Firefox 和 Chrome 是正确的，IE 是错误的。

为什么 SVG 在 Chrome 中被截断？

Why is SVG cut off in Chrome?

svg

google-chrome

html-rendering