SVG 文档作为应用程序/xhtml+xml 提供时错误呈现

Question

我想将一些内联 SVG 放入 HTML5 文档中。 在研究和测试过程中，当使用不同的 MIME 类型提供文档时，Firefox 和 Chrome（在撰写本文时已更新）显示出奇怪的行为。

首先请考虑以下最小的 HTML5 文档，如果它作为text/html提供，它会按预期工作：

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8" />
  <title>Test</title>

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
}
div {
  background-color: orange;
}
svg {
  display: block;
}
circle {
  stroke: black;
  fill: black;
}
</style>

</head>

<body>

<div>
  <svg width="28pt" height="28pt" viewbox="0 0 14 14">
    <circle cx="7" cy="7" r="6" />
  </svg>
</div>

</body>

</html>

正如JSFiddle所示，这是按预期呈现的：黑色圆圈填充svg和包装div几乎完全在高度上（圆圈的中心在7 ，即一半高度，因为用户坐标系从0到14高度）。

现在请考虑XHTML5 变体中的相同文档，并将其用作application/xhtml+xml ：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
  <meta charset="UTF-8" />
  <title>Test</title>

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
}
div {
  background-color: orange;
}
svg {
  display: block;
}
circle {
  stroke: black;
  fill: black;
}
</style>

</head>

<body>

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="28pt" height="28pt" viewbox="0 0 14 14">
    <circle cx="7" cy="7" r="6" />
  </svg>
</div>

</body>

</html>

我无法为那个提供 JSFiddle，因为我不知道如何使 JSFiddle（或类似站点）将文档作为application/xhtml+xml提供。

无论如何，现在的黑色圆圈只有它包含svg和包装div的高度的三分之一左右。 似乎 Firefox 和 Chrome错误地假定svg中的所有用户坐标在该文档/MIME 模式下都以像素为单位，即viewbox属性被忽略，因此我无法使用svg中项目的用户坐标。

这对我来说是个问题，因为我真的很想继续以application/xhtml+xml的形式提供我的文档。

任何人都可以解释这种奇怪行为的原因以及如何解决它吗？

Answer 1

XML 区分大小写。 HTML 不是。

svg 属性名称是viewBox ，而不是viewbox 。