我想将一些嵌入式SVG放入HTML5文档中。在进行研究和测试时，Firefox和Chrome（在撰写本文时已更新）在使用不同的MIME类型提供文档时显示出奇怪的行为。
首先，请考虑以下最小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>
正如the JSFiddle所示，这是按预期方式呈现的：黑色圆圈填充svg，而环绕的div高度几乎完全填充（圆圈的中心位于{{1 }}，即一半高度，因为用户坐标系的高度从7变为0。
现在，请考虑XHTML5变体中的同一文档，并将其用作14 ：
application/xhtml+xml我无法为此提供一个JSFiddle，因为我不知道如何使JSFiddle（或类似站点）作为<?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>
的文档。
无论如何，黑色圆圈现在仅是其包含application/xhtml+xml并包裹svg的高度的三分之一。在该文档/ MIME模式下，Firefox和Chrome 似乎错误地假设div中所有用户坐标为像素单位 ，即{{1} }属性会被忽略，因此我无法使用svg中项目的用户坐标。
这对我来说是个问题，因为我真的很想继续以viewbox的身份提供文档。
有人能解释这种奇怪行为的原因以及如何解决吗？