Question

如果要全局声明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>

身体：

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

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

至少在codepen中，你必须在任何一种情况下都将位置设置为绝对值。

Answer 1

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

我的意思是，你可以＆＃34;文件不会拒绝呈现，因为它的HTML，而不是XHTML，但包含defs的svg元素只是作为一个单独的SVG图像被移动到身体中（如果您事先已经自己测试过，可能会观察到这一点），不用说，它只是无效的标记。也就是说，在这两个示例中，您有两个单独的SVG图像（这就是您似乎必须应用绝对定位的原因），您可以清楚地看到在另一个中引用defs没有问题。

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

1 个答案: