請勿僅使用定義呈現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元素

回答

相關問題