5

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

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

4

3 回答 3

20

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

  • 缺乏维度
  • <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>
于 2016-06-02T16:33:04.987 回答
5

向定义<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>
于 2013-05-24T07:21:51.570 回答
0

使用 vw vw 作为 width 和 height 。

<svg
 width="20vw"
 height="10vw"
 viewBox="0 0 212 73"
 fill="none"
 xmlns="http://www.w3.org/2000/svg">
于 2021-10-07T03:05:03.990 回答