SVG要素を定義のみでレンダリングしない

他のSVG要素で使用するすべてのSVG定義を含むページに<svg>タグを1つ入れたいと思います。このような
何か： 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>

これは動作しますが、問題は、それが体の中にあったかのようにブラウザが<head>にあります<svg>タグをレンダリングすることです。

私は<svg>タグにwidth=0とheight=0を設定した場合、それは消えたが、それはまだ<body>の子要素です。

<svg>タグは定義だけで、ページの<body>の外側にある可能性はありますか？

少なくとも、<svg>要素が純粋に宣言的であり、ドキュメントの可視領域の一部ではないことをブラウザに伝える方法。

P.S. .:内部の定義が動的で、表示されているページに依存するため、外部の.svgファイルを使用したくありません。

出典

2017-10-07 Getfree

いいえ、SVGElement (<svg>)はmeta-data contentsの一部ではなく、<head>で許可されているコンテンツタイプのみです。それは<body>の子孫である必要があります。

しかし、CSSで絶対に配置し、Z-インデックスを-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要素を定義のみでレンダリングしない

答えて

関連する問題