请勿仅使用定义呈现SVG元素

我想在我的页面中包含一个<svg>标记，其中包含我将在其他SVG元素上使用的所有SVG定义。
事情是这样的：请勿仅使用定义呈现SVG元素

<html> 
 
<head> 
 

 
<svg> 
 
    <defs> 
 
     <filter id="shadow1"> 
 
      <feDropShadow dx="3" dy="7" stdDeviation="2"/> 
 
     </filter> 
 
    </defs> 
 
</svg> 
 

 
</head> 
 
<body style="display: flex"> 
 

 
    <svg viewBox="0 0 100 100" width="100"> 
 
     <path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" /> 
 
    </svg> 
 

 
</body> 
 
</html>

这工作，但问题是，浏览器呈现<svg>标签这是在<head>，如果它是身体内部。

如果我在<svg>标签设置width=0和height=0，它消失，但它仍然是<body>的子元素。

是否有可能只有定义<svg>标签，但在页面的<body>之外？

或者至少有一些告诉浏览器<svg>元素是纯粹声明性的，并不意味着是文档可见区域的一部分。

评分：我不想使用和外部.svg文件，因为里面的定义是动态的，取决于所查看的页面。

来源

2017-10-07 Getfree

不，SVGElement (<svg>)不是meta-data contents的一部分，只允许<head>中的内容类型。它必须是<body>的后裔。

但是，您可以将它完全放在CSS中，将其z-index设置为-1，将它的大小属性设置为0，并且不会呈现它。

svg.defs { 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<svg width="0" height="0" class="defs"> 
 
    <defs> 
 
    <filter id="shadow1"> 
 
     <feDropShadow dx="3" dy="7" stdDeviation="2"/> 
 
    </filter> 
 
    </defs> 
 
</svg> 
 
<svg viewBox="0 0 100 100" width="100"> 
 
    <path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" /> 
 
</svg>

来源

2017-10-07 03:27:55 Kaiido

请勿仅使用定义呈现SVG元素

回答

相关问题