Question

我对SVG一无所知 - 只是想了解一下。所以，我去了Wikipedia SVG Example 并思考＆＃34;哦，我可以在我的网页中嵌入这样的XML吗？＆＃34;试了一下，基本上，是的，你可以，但我在Chrome浏览器中呈现的图像（在Windows Enterprise 7上运行的版本45.0.2454.101 m）是关于Y = 150标记（维基百科页面上的Y = 150＆＃39） ; s网格）。

在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。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

为什么在Chrome中切断SVG？

1 个答案: