gpt4 book ai didi

html - SVG 生成空格

转载 作者:太空狗 更新时间:2023-10-29 15:22:27 25 4
gpt4 key购买 nike

我在我的项目中使用 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。

最佳答案

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

  • 缺乏维度
  • <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>

关于html - SVG <defs> 生成空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16729590/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com