我在我的项目中使用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.
小智 17
发生这种情况的两个原因是:
<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>
将零维度添加到定义<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>