HTML文書のheadタグにSVGのdefを配置できますか？

SVG定義をグローバルに宣言したい場合は、文書のヘッダーに定義することができますか、または本文に定義する必要がありますか？頭でHTML文書のheadタグにSVGのdefを配置できますか？

：体において

<html> 
    <head> 
     <svg> 
     <defs> 
      <rect id="boxyBox" height="40" width="40" style="fill:#00F;"></rect> 
      <rect id="circlyCircle" height="40" width="40" style="fill:#00F;"></rect> 
     </defs> 
     </svg> 
    </head> 
    <body> 
     <svg> 
     <use xlink:href="#boxyBox"/> 
     <use xlink:href="#circlyCircle"/> 
     </svg> 
    </body> 
</html>

：ここ

<html> 
    <head> 
    </head> 
    <body> 
     <svg> 
     <defs> 
      <rect id="boxyBox" height="40" width="40" style="fill:#00F;"></rect> 
      <rect id="circlyCircle" height="40" width="40" style="fill:#00F;"></rect> 
     </defs> 
     </svg> 
     <svg> 
     <use xlink:href="#boxyBox"/> 
     <use xlink:href="#circlyCircle"/> 
     </svg> 
    </body> 
</html>

はcodepenです。どちらの場合でも動作するようです。

少なくとも、いずれの場合も絶対位置に設定する必要があります。

出典

2017-06-12 1.21 gigawatts

HTMLドキュメントの先頭にSVGイメージ（または他の種類のイメージ）を配置することはできません。したがって、の SVG要素をHTMLドキュメントの先頭に配置することはできません。

XHTMLではなくHTMLであるため、ドキュメントはレンダリングを拒否するつもりはありませんが、defを含むsvg要素は別のSVGイメージとして本文に移動しますあらかじめこれを自分でテストしたことがあるかもしれないことに気がついたかもしれません）、もちろん、マークアップは無効です。つまり、どちらの例でも、2つの別々のSVG画像があります（これは絶対的な位置付けをしなければならないと思われる理由です）、もう一方のdefの参照に問題がないことがはっきり分かります。

出典

2017-06-12 04:10:34 BoltClock

なぜ無効になるのかわかりません。ヘッダー内のスタイルや外部からのスタイルを宣言することができます。 SVGの定義がどうして違うのか分かりません。実際には、外部SVGファイルにリンクすることができます。私はcodepenを作成しました。これは、頭や体の定義で動作します。どのようにあなたは身体に動かされたのかを "観察"しましたか？ –

@ 1.21ギガワット：SVGはHTMLではありません。私はDOMを調べてそれを観察しました。 – BoltClock

答えをありがとうが、なぜそれをイメージと呼んでいますか？私はあなたがSVGがベクトル（スケーラブルなベクトルグラフィックス）ではないことを知っています。あなたがビットマップ塗りつぶしなどのSVGリソースを意味するのでなければ？ –

HTML文書のheadタグにSVGのdefを配置できますか？

答えて

関連する問題