为什么 SVG 在 Chrome 中被切断？答案

【问题标题】：Why is SVG cut off in Chrome?为什么 SVG 在 Chrome 中被切断？
【发布时间】：2015-10-09 16:26:26
【问题描述】：

我对 SVG 了解不多 - 只是想学一点。所以，我去了Wikipedia SVG Example 并想“哦，我可以像这样在我的网页中嵌入 XML 吗？”试过了，基本上，是的，你可以，但是我在 Chrome 中看到的图像（在 Windows Enterprise 7 上运行的版本 45.0.2454.101 m）在 Y = 150 标记（维基百科页面网格上的 Y = 150）附近被截断.

在 IE 下呈现的相同网页看起来就像 Wikipedia 页面上的图像。在 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 一样）？

谢谢！

【问题讨论】：

感谢您的回复，罗伯特·朗森。

标签： google-chrome svg html-rendering

【解决方案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 是错误的。

【讨论】：