对于一个爱好项目(无图),我正在尝试使用svg矩形制作网格。在每第5行和第5列,边框笔划宽度比正常矩形大得多。
[在互联网上,我发现了有关笔划-偏移量和笔划-虚线数组的内容,但是您无法更改一侧的厚度。因此,我想为什么不创建多个相互重叠的矩形,以便边框厚度可以与另一个矩形重叠,但是不幸的是,这是行不通的。也许我犯了一个错误,或者不可能创建我想要的东西。
前5个svg元素是用于边框的元素,所有其他元素是单个矩形。
<html>
<head>
<title>
</title>
</head>
<body>
<svg width="1000" height="1000">
<rect x=10 y=10 width=200 height=200 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=10 y=10 width=100 height=100 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=10 y=110 width=100 height=100 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=110 y=110 width=100 height=100 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=110 y=10 width=100 height=100 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=10 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
</body>
</html>
这只是抗锯齿。您可以通过形状渲染将其关闭,例如形状渲染:crispEdges;
如果您也可以减少标记
<g>
元素上设置通用样式<html>
<head>
<title>
</title>
</head>
<body>
<svg width="1000" height="1000" shape-rendering="crispEdges">
<rect x=10 y=10 width=200 height=200 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=10 y=10 width=100 height=100 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=10 y=110 width=100 height=100 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=110 y=110 width=100 height=100 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=110 y=10 width=100 height=100 style="fill:white;stroke:black;stroke-width:4 "/>
<rect x=10 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=10 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=30 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=50 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=70 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=90 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=110 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=130 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=150 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=170 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=10 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=30 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=50 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=70 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=90 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=110 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=130 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=150 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=170 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
<rect x=190 y=190 width=20 height=20 style="fill:white;stroke:black;stroke-width:1 "/>
</body>
</html>