Question

我在我的项目中使用SVG，现在我必须在只有<defs>的网页中创建一个SVG元素。在页面的后面，我将多次使用前面定义的对象。问题在于具有定义的对象，实际上它在页面中创建了一个空白区域。试试这段代码：

<!DOCTYPE html>
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <defs>
                <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
            </defs>
        </svg>

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
            <use x=0 y=0 xlink:href="#star">
        </svg>
    </body>
</html>

我遇到了Firefox和Chrome的问题。我不关心IE。

Answer 1

发生这种情况的两个原因是：

缺乏维度
<svg>呈现为display:inline

向<svg>标记添加维度最初会隐藏大部分空间，但会留下一小部分。

设置display:none将隐藏其他<svg>元素中引用的任何模式/渐变/等，因此不合适。

要完全隐藏它，请将<svg>标记设为display:block。然后它将遵循先前给出的零长度尺寸。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block;">
    <defs>
        <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    </defs>
</svg>

Answer 2

为定义的<svg>标记添加零维度：

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
        <defs>
            <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
        </defs>
    </svg>

由于您既没有设置视口也没有设置尺寸，我猜，浏览器尝试在此处推断值，从而导致SVG的“默认大小”，从而呈现空白区域。

修改

或者，使用display: none元素将<svg>设置为<defs>：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;"> <defs> <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </defs> </svg>

SVG <defs>生成空格</defs>

2 个答案: