2017-05-28 55 views
3

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

并且嵌套svgs允许defs?

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

我不可能找到与此相关的

回答

2

是的,它是允许的, 他们有不同的命名空间的规格东西:

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

+0

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

+0

是的,这个ID必须改变.. –

相关问题