SVGサークルの寸法を正しく設定する方法は？

htmlで小さな円を実装する際に問題が発生しています。私はsvgについて知りました。私は自分のプロジェクトを完成させることができると思います。私は2ピクセル×2ピクセルの正方形を1ピクセルの黒いアウトラインで問題なく描くことができます。SVGサークルの寸法を正しく設定する方法は？

円の問題はアウトラインの寸法にあります。私が1の値を使用する場合、それは小さすぎるので、私は2の値を使用し、それは良く見えます。何らかの理由で半径もすべて間違っていますが、半径が1.5で、画像の大きさが5 x 5ピクセルになってしまいます。

ズームした画像です：最初の行（最初の表）を見た場合、寸法は2番目の行（2番目の表）と異なります。これは円の5×5ピクセルの寸法によるものですか？

ここコードです。どのように私はこれを修正するのですか？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 1px; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg height="5" width="5"> 
 
      <circle cx="2.5" cy="2.5" r="1.5" stroke="black" fill="yellow"> 
 
      </circle> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 
<!-- The second table starts here --> 
 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

出典

2016-04-03 cronos

1 SVGは '幅= "10" を有する'と他のすべての '幅= "4"'持っているので、これは単純です。 – Siguza

あなたは正しいです。あなたの提案は何ですか？ – cronos

要素のwidthとheight属性は、サポートされている場合、通常はピクセル単位でその寸法を設定します。
だからあなたの問題は、本質的に、これを解決するための（私の意見では）クリーンな方法は、4×4にその1つのSVGの寸法を変更することやサークルの属性で使用される値を掛けます。4.

に等しくない5に沸きます4/5によって：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 1px; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg height="4" width="4"> 
 
      <circle cx="2" cy="2" r="1.2" stroke="black" fill="yellow"> 
 
      </circle> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 
<!-- The second table starts here --> 
 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

もう一つの方法は、viewBox属性を利用することであろう。
問題のSVGのwidth属性とheight属性は4ですが、viewBoxから0 0 5 5に設定します。
この方法では、外寸は4×4ピクセルになりますが、SVG内の要素は、左上隅が（0,0）で右下隅が（5,5）のようにスケーリングされ、配置されます。
これは、任意の比率を乱すことなく容易にスケーラビリティが得られるという利点があります。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 1px; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg height="4" width="4" viewBox="0 0 5 5"> 
 
      <circle cx="2.5" cy="2.5" r="1.5" stroke="black" fill="yellow"> 
 
      </circle> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 
<!-- The second table starts here --> 
 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

出典

2016-04-03 14:53:55 Siguza

テーブルをズームすると、3時と6時にサークルカットが表示されます。 – cronos

あなたは正しいです、私の答えを更新しました。 – Siguza

パーフェクト、私はちょうど "r = 1.5"に半径を変更し、それは働いた！ – cronos

SVGサークルの寸法を正しく設定する方法は？

答えて

関連する問題