如何正确设置SVG圈的尺寸？

问题描述：

我有问题在html中实现一个小圆圈。我刚刚发现了svg，我认为它会让我完成我的项目。我能够画一个2像素的正方形，2像素，1像素的黑色轮廓，没有问题。如何正确设置SVG圈的尺寸？

圆的问题与轮廓的尺寸有关;如果我使用1的值，它太小了，这就是为什么我使用2的值，它看起来不错。由于某些原因，半径也是错的，我最终使用半径为1.5，图像尺寸为5 x 5像素。如果你看第一行（第一个表格），尺寸与第二行（第二个表格）不同，这是由于圆圈的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>

这仅仅是因为一个SVG具有'宽度= “10”'和所有其他有'宽度= “4”'。 – Siguza

你是对的;那么你的建议是什么？ – cronos

答

对元件的width和height属性，如果支持的话，通常以像素为单位设定其尺寸。
所以你的问题基本上可以归结为5不等于4.

的（在我看来）解决，这将是最干净的方法来改变一个SVG的尺寸4x4和繁殖在圈内的属性所使用的值通过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 x 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>

如果您放大表格，您将在3点和6点钟看到圆形切割。 – cronos

你是对的，更新了我的答案。 – Siguza

完美，我只是改变了半径为“r = 1.5”，它的工作！ – cronos

如何正确设置SVG圈的尺寸？

相关推荐