当文档作为 application/xhtml+xml 时，SVG 呈现不正确

SVG incorrectly rendered when document is served as application/xhtml+xml

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

首先请考虑以下最小的 HTML5 文档 如果它被用作 text/html[=52=，它将按预期工作 ]:

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

如 the 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.

的身份提供我的文档

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

XML 区分大小写。 HTML 不是。

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