SVG 线条无法正确渲染答案

【问题标题】：SVG lines not rendering properlySVG 线条无法正确渲染
【发布时间】：2019-10-13 15:21:15
【问题描述】：

我正在尝试将矩形绘制为四条线。问题是顶部和左侧的线条看起来更细，并且右下角缺少像素（请参阅屏幕截图）。

HTML svg 元素：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" style="
    padding: 20px;
    box-sizing: border-box;
">
    <line x1="0" y1="0" x2="20" y2="0" class="line"></line>
    <line x1="20" y1="0" x2="20" y2="20" class="line"></line>
    <line x1="20" y1="20" x2="0" y2="20" class="line"></line>
    <line x1="0" y1="20" x2="0" y2="0" class="line"></line></svg>
</svg>

在浏览器中渲染结果： [

【问题讨论】：

您的css 为class="line" 定义了什么？尝试将stroke-linecap:round;stroke-linejoin:round; 添加到类定义中。
@daShier .line 仅将描边颜色定义为黑色。添加 stroke-linecap:square;解决了丢失的像素。但是右边和底线还是比较粗的。
在 SVG 标记注释上，您似乎缺少 <svg viewBox="..."> 属性，该属性确定页面尺寸（宽度和高度，仅用于“显示 SVG 文件的内容”） ") 映射到图像内坐标（本质上是无单位的，并且仅在 SVG 文档中有意义）。 viewBox 给出了“裁剪”矩形，并说明应该绘制 SVG 文档的哪个部分，然后宽度/高度告诉所有者在什么物理尺寸上绘制它。例如width="10px" height="20px" viewBox="0 0 1 2" 在页面上是 10x20，显示 (0,0) 和 (1,2) 之间的所有内容
@Mike'Pomax'Kamermans 如果您不希望绘图缩放其容器比例，则可以省略 viewBox。有时这就是你想要的。
有时，但这在标准 HTML 上下文中非常很少见，您使用 SVG 的主要原因正是因为它是可缩放的矢量图形。

标签： javascript html css svg

【解决方案1】：

只有一条线的笔触是可见的，并且它的每一侧均等地延伸。因此，如果您从 0, 0 到 100, 0 绘制一条线，并且该线的宽度为 2，那么该线实际上将占据一个带有角的矩形 (-1, -1), (101, -1), (101, 1 ), (-1, 1)。

因此，您的矩形线条部分位于绘图画布之外，而那些在外部的部分不可见。

另外，如果你想画一个正方形，你需要画一些更长的线，这样你才能在角落里得到一个正方形的效果。或者使用<path>，它会处理角落而无需您担心。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" viewBox="0 0 40 40" style="
    padding: 20px;
    box-sizing: border-box;
">
    <path d="M0,0 20,0 20,20 0,20Z" fill="none" stroke="black" transform="translate(1,1)" />
</svg>

或者你可以移动画布，例如

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" viewBox="-2 -2 40 40" style="
    padding: 20px;
    box-sizing: border-box;
">
    <path d="M0,0 20,0 20,20 0,20Z" fill="none" stroke="black" />
</svg>

【讨论】：

所以将`x坐标偏移2将为OP修复它，或者可以将画布原点设置为-2，-2？
你也可以。我已更新我的答案以显示两者。
另请注意，SVG 在所有形状元素上都有strokeWidth 属性。在这里并不严格，但如果您确实需要控制 SVG 形状轮廓的粗细，比 CSS 更好。
strokeWidth 是一个 CSS 属性，恰好也可用作映射属性。

【解决方案2】：

我已经重新编写了您的 SVG，并进行了一些小改动，它似乎工作正常。

有四个主要变化：

<line /> 是一个自闭合元素。
我已经明确地给每个line 一个stroke-width 的1
无论你在哪里使用0 的坐标，我都使用1
我给每个line 一个stroke-linecap square

我还将viewBox 缩小为100 x 100，因此您可以看到更大的正方形。

工作示例：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100">

<defs>
<style type="text/css"><![CDATA[

svg {
background-color: rgb(255, 0, 0);
padding: 20px;
box-sizing: border-box;
}

.line {
stroke: rgb(255, 255, 255);
stroke-width: 1;
stroke-linecap: square;
}

]]></style>
</defs>

<line x1="1" y1="1" x2="21" y2="1" class="line" />
<line x1="21" y1="1" x2="21" y2="21" class="line" />
<line x1="21" y1="21" x2="1" y2="21" class="line" />
<line x1="1" y1="21" x2="1" y2="1" class="line" />

</svg>

【讨论】：

【解决方案3】：

或者，以尽可能短的形式：

<svg width="250" height="250" viewBox="-1 -1 22 22">
  <path d="M0,0H20V20H0z" fill="none" stroke="black"/>
</svg>

【讨论】：