SVG文档中是否允许多个defs？

Question

SVG文档中是否允许多个defs？

我想确保遵循标准.
是否允许在一个SVG文档中有多个defs？

嵌套的svgs是否允许有defs？

<svg>
 <defs></defs>
 <svg>
  <defs></defs>
 </svg>
</svg>

Run Code Online (Sandbox Code Playgroud)

我找不到与此相关的规格中的任何内容

Answer 1

Fra*_*ski 10

是的，这是允许的，但请记住，ids 在整个文档中仍然必须是唯一的。以下示例的行为未定义/依赖于浏览器：

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <svg width="800px" height="300px"
           xmlns="http://www.w3.org/2000/svg">

        <defs>
          <linearGradient id="Gradient01">
            <stop offset="20%" stop-color="#39F" />
            <stop offset="90%" stop-color="#F3F" />
          </linearGradient>
        </defs>

        <rect x="10" y="10" width="60" height="10" 
              fill="url(#Gradient01)" />
        <svg width="380px" height="330px"      
             xmlns="http://www.w3.org/2000/svg">

        <defs>
          <linearGradient id="Gradient01">
            <stop offset="50%" stop-color="#39F" />
            <stop offset="90%" stop-color="#F3F" />
          </linearGradient>
        </defs>

        <rect x="250" y="250" width="160" height="110" 
              fill="url(#Gradient01)" />
        </svg>
      </svg>
  </body>
  </html>

Run Code Online (Sandbox Code Playgroud)

关于它被允许的主要答案是正确的。但是关于“不同的命名空间”的其余部分是完全错误的。`id` 属性在文档中必须是唯一的。有两个 defs 部分不会改变这一点。如果你有重复的 `id` 属性，你会得到未定义的（和浏览器相关的）结果。为了证明，请尝试在 Chrome 中查看此示例，然后在 Firefox 中查看。 (3认同)

归档时间：	8 年，5 月前
查看次数：	1415 次
最近记录：	6 年，1 月前