Question

我在html中实现一个小圆圈时遇到问题。我刚刚发现了svg，我想它可以让我完成我的项目。我能够绘制一个2像素乘2像素的正方形，黑色轮廓为1像素，没有任何问题。

圆圈的问题在于轮廓的尺寸;如果我使用值1它太小，这就是为什么我使用值2并且它看起来很好。由于某种原因半径也是错误的，我最终使用半径为1.5，图像尺寸为5乘5像素。

这是缩放的图片：如果你看第一行（第一张表）的尺寸与第二行（第二张表）不同，这是由于圆的尺寸为5乘5像素？

这是代码;我该如何解决这个问题？

＆＃13;

<!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>

＆＃13;

Answer 1

元素的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乘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>

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

1 个答案: