你可以将SVG defs放在HTML文档的head标签中吗？

Question

你可以将SVG defs放在HTML文档的head标签中吗？

如果要全局声明SVG定义,可以在文档的标题中定义它们,还是必须在正文中定义它们？

在头部:

<html>
   <head>
      <svg>
         <defs>
            <rect id="boxyBox" height="40" width="40" style="fill:#00F;"></rect>
            <rect id="circlyCircle" height="40" width="40" style="fill:#00F;"></rect>
         </defs> 
      </svg>
   </head>
   <body>
      <svg>
         <use xlink:href="#boxyBox"/>
         <use xlink:href="#circlyCircle"/>
      </svg>
   </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在身体里:

<html>
   <head>
   </head>
   <body>
      <svg>
         <defs>
            <rect id="boxyBox" height="40" width="40" style="fill:#00F;"></rect>
            <rect id="circlyCircle" height="40" width="40" style="fill:#00F;"></rect>
         </defs> 
      </svg>
      <svg>
         <use xlink:href="#boxyBox"/>
         <use xlink:href="#circlyCircle"/>
      </svg>
   </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是codepen.它似乎适用于这两种情况.

它至少出现在codepen中,你必须在任何一种情况下将位置设置为绝对.

Answer 1

Bol*_*ock 5

您不能在 HTML 文档的头部放置 SVG 图像（或任何其他类型的图像），因此您不能在 HTML 文档的头部放置任何SVG 元素。

我的意思是，您“可以”，文档不会拒绝呈现，因为它是 HTML，而不是 XHTML，但是svg包含 defs的元素将作为单独的 SVG 图像移动到正文中（如果你事先已经测试过了），不用说，它只是无效的标记。也就是说，在两个示例中，您都有两个单独的 SVG 图像（这就是为什么您似乎必须应用绝对定位的原因），并且您可以清楚地看到一个引用另一个中的 defs 没有问题。

简单地声明 HTMLHeadElement (<head>) 只能包含 base、link、meta、noscript、script、style、template 和 title 元素可能会更清楚。 (4认同)
我不明白为什么它会无效。您可以在标题或外部链接中声明样式。我不明白为什么 SVG 定义会有所不同。事实上，您可以链接外部 SVG 文件。我创建了一个代码笔。它适用于头部或身体中的定义。你是如何“观察”到 defs 移动到身体的？ (3认同)
@1.21 吉瓦：因为矢量和位图（又名光栅）都是图像格式。您还可以使用 img 元素引用 SVG 文件。 (2认同)
@1.21gigawatts 出于好奇，你如何链接到头部的外部svg？您是否使用“<link>”，如果使用，您分配哪个“rel”属性？ (2认同)

归档时间：	8 年，11 月前
查看次数：	1496 次
最近记录：	8 年，11 月前