SVG <defs>は空白を生成します

私のプロジェクトでSVGを使用していますが、今度は<defs>というWebページ内にSVG要素を作成する必要があります。ページの後半では、前に定義したオブジェクトを何度も使用しました。問題は定義を持つオブジェクトにあります。実際には、ページに空白ができます。このコードを試してみてください。SVG <defs>は空白を生成します

<!DOCTYPE html> 
<html> 
    <body> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
      <defs> 
       <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
      </defs> 
     </svg> 

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> 
      <use x=0 y=0 xlink:href="#star"> 
     </svg> 
    </body> 
</html>

私は、FirefoxとChromeの両方に問題があります。私はIEについては気にしない。

出典

2013-05-24 Max Markson

定義<svg>タグにゼロ次元を追加します。あなたはどちらのビューポートや寸法を設定すると、私は推測する、ブラウザがSVGのための「デフォルトサイズ」が得られ、ここで、したがって、値を推測しようとした

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

空の空間をレンダリングします。

EDITあるいは

、<defs>要素と<svg>にdisplay: noneを設定：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

出典

2013-05-24 07:21:51 Sirko

スペースは減少しますが、消えません。使用後に定義を移動しようとすると、使用が上に移動し、空白スペースが下に移動することがわかります。 –

@MaxMarkson私のFFとChromeでは、「」-SVGは完全に消えました。どこかのパディングやマージンが適用されていないのは確かですか？ – Sirko

この画像を確認する： http://imageshack.us/a/img819/2999/defsafter.png http://imageshack.us/a/img826/1323/defsbefore.png –

これが起こっている理由は2である：寸法の

欠如
<svg><svg>タグに寸法を追加display:inline

としてレンダリングされると、最初に撮影した空間の大部分を非表示にしますが、小さな部分が残ります。

設定すると、display:noneは、他の<svg>要素で参照されているパターン/グラデーション/ etcを非表示にするため、適切ではありません。

完全に非表示にするには、<svg>タグをdisplay:blockと設定します。それは、先に与えられた長さ0の寸法を尊重する。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block;"> 
    <defs> 
     <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
    </defs> 
</svg>

出典

2016-06-02 16:33:04 jussinen

これは' width = "0" 'と' height = "0" 'と' display：ブロックまたは位置：絶対値である。 – Dominik

SVG <defs>は空白を生成します

答えて

関連する問題