代码之家 › 专栏 › 技术社区 › JohnB

将<svg>资源放在</body>之后合法吗?

svg html

JohnB · 技术社区 · 2 年前

我可以放svg资源吗 use d在网站后面的身体末端,以保持他们在将要呈现的内容之外?

简而言之:做以下事情合法吗?

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 315.424 315.424" >
      <use href="#arrow" fill="rgb(0,44,89)" />
    </svg>
  </body>
  <svg>
    <g id="arrow">
      <path d="M311.929,222.266l-96.119-67.342c-1.413-0.99-2.783-1.513-4.307-1.513c-3.307,0-6.471,2.512-6.471,7.313v41.05H19.886
         c-4.962,0-8.854,4.132-8.854,9.094v35.563c0,4.962,3.892,9.343,8.854,9.343h185.146v40.81c0,4.801,3.167,7.19,6.474,7.19
         c0.001,0-0.089,0-0.089,0c1.524,0,3.032-0.461,4.445-1.451l96.09-67.306c2.214-1.55,3.473-3.864,3.473-6.375
         S314.142,223.815,311.929,222.266z" />
    </g>
  </svg>
</html>

1 回复 | 直到 2 年前

Mehdi 2 年前

如果目的不是为了得到原件 #arrow 在文档中呈现时,可以将其包含在 svg 在 body 缠绕 defs .

下面剪掉了视频中的演示。

<svg xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 315.424 315.424">
   <defs>
      <g id="arrow">
         <path d="M311.929,222.266l-96.119-67.342c-1.413-0.99-2.783-1.513-4.307-1.513c-3.307,0-6.471,2.512-6.471,7.313v41.05H19.886
            c-4.962,0-8.854,4.132-8.854,9.094v35.563c0,4.962,3.892,9.343,8.854,9.343h185.146v40.81c0,4.801,3.167,7.19,6.474,7.19
            c0.001,0-0.089,0-0.089,0c1.524,0,3.032-0.461,4.445-1.451l96.09-67.306c2.214-1.55,3.473-3.864,3.473-6.375
            S314.142,223.815,311.929,222.266z" />
      </g>
   </defs>
   <use href="#arrow" fill="rgb(0,44,89)" />
</svg>