这是Chrome中的svg笔画宽度错误吗？

Question

我试图创建一个svg点，我可以扩大使用笔画宽度。

css lang-css prettyprint-override">svg{
  zoom: 3000%;
  margin-top: 1px;
  fill: red;
  stroke: blue;
}

body{
    display: flex;
  div{
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    height: 100%;
    padding: 20px 0;
  }
}

<div>
  stroke-width: 1px;
<svg stroke-width="1" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
  <g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
    <path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
    <circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
  </g>
</svg>
</div>

<div>
  stroke-width: 2px;
<svg stroke-width="2" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
  <g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
    <path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
    <circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
  </g>
</svg>
</div>

<div>
  stroke-width: 3px;
<svg stroke-width="3px"  xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
  <g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
    <path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
    <circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
  </g>
</svg>
</div>


<div>
  stroke-width: 4px;
<svg stroke-width="4px" xmlns="http://www.w3.org/2000/svg" width="4" height="6.843" viewBox="0 0 4 6.843">
  <g id="Group_614" data-name="Group 614" transform="translate(-851.372 -396.657)">
    <path id="Group_608" data-name="Group 608" d="M16,22.1a.371.371,0,1,1-.371.371h0A.371.371,0,0,1,16,22.1Z" transform="translate(837.372 375.561)" stroke-miterlimit="10"/>
    <circle id="Ellipse_20" data-name="Ellipse 20" cx="0.5" cy="0.5" r="0.5" transform="translate(852.872 401)" />
  </g>
</svg>
</div>

Answer 1

试图绘制笔划超过半径两倍的圆不是一个好主意。正如您所发现的，这种情况下的行为是不可靠的，许多2D呈现库不能很好地处理它。SVG规范中也没有定义正确的行为。

不过，你的问题有一个简单的解决办法。只需画一条零长度的线，它有圆形的端盖。好消息是这不是诡计。这样做是安全的，因为规范中指定了此行为。并且所有的SVG呈现器都能正确地处理它。

svg{
  margin-top: 1px;
  fill: none;
  stroke: blue;
  stroke-linecap: round;
}

body{
    display: flex;
  div{
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    height: 100%;
    padding: 20px 0;
  }
}

<div>
  stroke-width: 1px;
<svg stroke-width="1" width="120" height="120" viewBox="0 0 4 4">
  <path d="M2,2h0"/>
</svg>
</div>

<div>
  stroke-width: 2px;
<svg stroke-width="2" width="120" height="120" viewBox="0 0 4 4">
  <path d="M2,2h0"/>
</svg>
</div>

<div>
  stroke-width: 3px;
<svg stroke-width="3" width="120" height="120" viewBox="0 0 4 4">
  <path d="M2,2h0"/>
</svg>
</div>


<div>
  stroke-width: 4px;
<svg stroke-width="4" width="120" height="120" viewBox="0 0 4 4">
  <path d="M2,2h0"/>
</svg>
</div>