SVG< defs>产生空白 [英] SVG <defs> generates blank space
问题描述
我在项目中使用SVG，现在我必须在仅<defs>的网页内创建SVG元素.
在页面的稍后部分，我将多次使用之前定义的对象.
问题出在带有定义的对象上，实际上它在页面中创建了空白.
尝试以下代码:
I'm using SVG in my project, now I have to create a SVG element inside a web page with only <defs>.
Later in the page I've to use many times the objects defined earlier.
The problem lies in the object with the definitions, infact it creates a blank space in the page.
Try this code:
<!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.
I have the problem with both Firefox and Chrome. I don't care about IE.
推荐答案
为定义的<svg>标签添加零个维度:
Add zero dimensions to the defining <svg> tag:
<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的默认大小"，从而呈现出空白空间.
As you set neither viewport nor dimensions, I guess, the browser tried to infer values here and thus resulting in a "default size" for the SVG, thus rendering the empty space.
编辑
或者，使用<defs>元素将display: none设置为<svg>:
Alternatively, set display: none to the <svg> with the <defs> element:
<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>产生空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
