Question

我使用svg创建了一个带有文本的圆圈。当添加文本时，圆圈下方有很多空白，我无法弄清楚为什么以及如何摆脱空白。

当删除“标题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像素的黑色方块。

Image showing the problem in IE11

Image showing title 2 removed

Answer 1

据我所知，IE中存在一个错误，并且通过向svg添加“overflow：hidden”来解决问题。

SELECT COUNT(id_pnc) 
FROM programmevol p
WHERE p.id_pnc IN (
    SELECT id_pnc 
    FROM programmevol A 
    WHERE p.id_pnc=A.id_pnc
    HAVING COUNT(*)>1
);

在SVG圈周围添加文本会在圆圈下方创建空白

1 个答案: