我已经创建了一个使用SVG周围文本的圆圈。当添加文本时，Cirle下面有很多空格，我无法弄清楚为什么以及如何摆脱空格。
删除"标题2"时，白色空间消失了，但我不知道为什么。
HTML生成圆的简单版本：
<!DOCTYPE html>
<html lang="da-DK">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title>Test</title>
<style>
.square {height:860px; width:860px; visibility:hidden;}
.canvas {background-color:#ffff00;}
.canvas svg {position:absolute; top:0; left:0; width:860px; height:860px;}
</style>
</head>
<body>
<div class="canvas">
<img alt="" class="square" src="square.gif" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 860 860">
<g transform="translate(430 430)">
<path id="title1" transform="rotate(6)" fill="none" stroke="none" d="M 213.79739461516 361.51165134166 A 420 420 0 0 0 420 0" />
<text text-anchor="middle"><textPath xlink:href="#title1" startOffset="50%">Title 1</textPath></text>
<path id="title2" transform="rotate(66)" fill="none" stroke="none" d="M 91.620161386548 409.88504001427 A 420 420 0 0 0 420 0" />
<text text-anchor="middle"><textPath xlink:href="#title2" startOffset="50%">Title 2</textPath></text>
<path id="title3" transform="rotate(144)" fill="none" stroke="none" d="M 213.79739461516 361.51165134166 A 420 420 0 0 0 420 0" />
<text text-anchor="middle"><textPath xlink:href="#title3" startOffset="50%">Title 3</textPath></text>
<path id="title4" transform="rotate(204)" fill="none" stroke="none" d="M 420 0 A 420 420 0 0 1 174.83793274937 381.87916579977" />
<text text-anchor="middle" dy="13"><textPath xlink:href="#title4" startOffset="50%">Title 4</textPath></text>
<path id="title5" transform="rotate(270)" fill="none" stroke="none" d="M 420 0 A 420 420 0 0 1 385.45694278727 166.80211406661" />
<text text-anchor="middle" dy="13"><textPath xlink:href="#title5" startOffset="50%">Title 5</textPath></text>
<path id="title6" transform="rotate(294)" fill="none" stroke="none" d="M 420 0 A 420 420 0 0 1 385.45694278727 166.80211406661" />
<text text-anchor="middle" dy="13"><textPath xlink:href="#title6" startOffset="50%">Title 6</textPath></text>
<path id="title2" transform="rotate(318)" fill="none" stroke="none" d="M 420 0 A 420 420 0 0 1 284.28790726672 309.16077659029" />
<text text-anchor="middle" dy="13"><textPath xlink:href="#title7" startOffset="50%">Title 7</textPath></text>
</g>
</svg>
<br>
Here is a new line inside the canvas.<br>
</div>
Here is a new line outside the canvas.<br>
</body>
</html>
square.gif包含一个黑色正方形，测量10x10 px。
图像显示IE11
中的问题显示标题2的图像
据我所知，IE中有一个错误，并通过添加"溢出：隐藏"到SVG的问题是解决问题的。
.canvas svg {position:absolute; top:0; left:0; width:860px; height:860px; overflow: hidden;}