【问题标题】：SVG lines are displayed in different waysSVG 线条以不同的方式显示
【发布时间】：2018-11-15 13:30:01
【问题描述】：

小提琴

HTML

<svg id="svg-timer" xmlns="http://www.w3.org/2000/svg">
   <line class="timer-hours" x1="8.3333333333333%" y1="0" x2="8.3333333333333%" y2="325"></line>
   <text x="8.3333333333333%" y="340" text-anchor="middle" fill="black">1H</text>
   <line class="timer-hours" x1="16.666666666667%" y1="0" x2="16.666666666667%" y2="325"></line>
   <text x="16.666666666667%" y="340" text-anchor="middle" fill="black">2H</text>
   <line class="timer-hours" x1="25%" y1="0" x2="25%" y2="325"></line>
   <text x="25%" y="340" text-anchor="middle" fill="black">3H</text>
   <line class="timer-hours" x1="33.333333333333%" y1="0" x2="33.333333333333%" y2="325"></line>
   <text x="33.333333333333%" y="340" text-anchor="middle" fill="black">4H</text>
   <line class="timer-hours" x1="41.666666666667%" y1="0" x2="41.666666666667%" y2="325"></line>
   <text x="41.666666666667%" y="340" text-anchor="middle" fill="black">5H</text>
   <line class="timer-hours" x1="50%" y1="0" x2="50%" y2="325"></line>
   <text x="50%" y="340" text-anchor="middle" fill="black">6H</text>
   <line class="timer-hours" x1="58.333333333333%" y1="0" x2="58.333333333333%" y2="325"></line>
   <text x="58.333333333333%" y="340" text-anchor="middle" fill="black">7H</text>
   <line class="timer-hours" x1="66.666666666667%" y1="0" x2="66.666666666667%" y2="325"></line>
   <text x="66.666666666667%" y="340" text-anchor="middle" fill="black">8H</text>
   <line class="timer-hours" x1="75%" y1="0" x2="75%" y2="325"></line>
   <text x="75%" y="340" text-anchor="middle" fill="black">9H</text>
   <line class="timer-hours" x1="83.333333333333%" y1="0" x2="83.333333333333%" y2="325"></line>
   <text x="83.333333333333%" y="340" text-anchor="middle" fill="black">10H</text>
   <line class="timer-hours" x1="91.666666666667%" y1="0" x2="91.666666666667%" y2="325"></line>
   <text x="91.666666666667%" y="340" text-anchor="middle" fill="black">11H</text>
   <line class="timer-quarters" x1="2.0833333333333%" y1="0" x2="2.0833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="4.1666666666667%" y1="0" x2="4.1666666666667%" y2="350"></line>
   <line class="timer-quarters" x1="6.25%" y1="0" x2="6.25%" y2="350"></line>
   <line class="timer-quarters" x1="10.416666666667%" y1="0" x2="10.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="12.5%" y1="0" x2="12.5%" y2="350"></line>
   <line class="timer-quarters" x1="14.583333333333%" y1="0" x2="14.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="18.75%" y1="0" x2="18.75%" y2="350"></line>
   <line class="timer-quarters" x1="20.833333333333%" y1="0" x2="20.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="22.916666666667%" y1="0" x2="22.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="27.083333333333%" y1="0" x2="27.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="29.166666666667%" y1="0" x2="29.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="31.25%" y1="0" x2="31.25%" y2="350"></line>
   <line class="timer-quarters" x1="35.416666666667%" y1="0" x2="35.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="37.5%" y1="0" x2="37.5%" y2="350"></line>
   <line class="timer-quarters" x1="39.583333333333%" y1="0" x2="39.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="43.75%" y1="0" x2="43.75%" y2="350"></line>
   <line class="timer-quarters" x1="45.833333333333%" y1="0" x2="45.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="47.916666666667%" y1="0" x2="47.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="52.083333333333%" y1="0" x2="52.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="54.166666666667%" y1="0" x2="54.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="56.25%" y1="0" x2="56.25%" y2="350"></line>
   <line class="timer-quarters" x1="60.416666666667%" y1="0" x2="60.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="62.5%" y1="0" x2="62.5%" y2="350"></line>
   <line class="timer-quarters" x1="64.583333333333%" y1="0" x2="64.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="68.75%" y1="0" x2="68.75%" y2="350"></line>
   <line class="timer-quarters" x1="70.833333333333%" y1="0" x2="70.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="72.916666666667%" y1="0" x2="72.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="77.083333333333%" y1="0" x2="77.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="79.166666666667%" y1="0" x2="79.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="81.25%" y1="0" x2="81.25%" y2="350"></line>
   <line class="timer-quarters" x1="85.416666666667%" y1="0" x2="85.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="87.5%" y1="0" x2="87.5%" y2="350"></line>
   <line class="timer-quarters" x1="89.583333333333%" y1="0" x2="89.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="93.75%" y1="0" x2="93.75%" y2="350"></line>
   <line class="timer-quarters" x1="95.833333333333%" y1="0" x2="95.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="97.916666666667%" y1="0" x2="97.916666666667%" y2="350"></line>
</svg>

CSS

#svg-timer {
  width: 100%;
  display: block;
  height: 350px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  font-family: Arial;
}

.timer-hours {
  stroke: rgb(0, 0, 0);
  stroke-width: 1;
}

.timer-quarters {
  stroke: rgb(0, 0, 0);
  stroke-width: 0.03em;
}

说明

我想画 11 条线，每小时一条——它们都是一样的（timer-hours 类）。他们在他们下面有一个文本。到目前为止一切正常。

问题

线条有不同的粗细——为什么它们的“粗细”不一样？

我有两个不同的屏幕，我都遇到了问题。

我也试过

stroke-width: 0.1em;

但没有变化。

我需要另一个单位 (px) 吗？

在屏幕截图上，它看起来也不同？！

截图

【问题讨论】：

我无法理解你的问题。如果 JSFiddle 也匹配您的代码会更好。

标签： html css svg

【解决方案1】：

添加形状渲染：crispEdges;

#svg-timer {
  width: 100%;
  display: block;
  height: 350px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  font-family: Arial;
  shape-rendering: crispEdges;
}

.timer-hours {
  stroke: rgb(0, 0, 0);
  stroke-width: 1;
}

.timer-quarters {
  stroke: rgb(0, 0, 0);
  stroke-width: 0.03em;
}

<svg id="svg-timer" xmlns="http://www.w3.org/2000/svg">
   <line class="timer-hours" x1="8.3333333333333%" y1="0" x2="8.3333333333333%" y2="325"></line>
   <text x="8.3333333333333%" y="340" text-anchor="middle" fill="black">1H</text>
   <line class="timer-hours" x1="16.666666666667%" y1="0" x2="16.666666666667%" y2="325"></line>
   <text x="16.666666666667%" y="340" text-anchor="middle" fill="black">2H</text>
   <line class="timer-hours" x1="25%" y1="0" x2="25%" y2="325"></line>
   <text x="25%" y="340" text-anchor="middle" fill="black">3H</text>
   <line class="timer-hours" x1="33.333333333333%" y1="0" x2="33.333333333333%" y2="325"></line>
   <text x="33.333333333333%" y="340" text-anchor="middle" fill="black">4H</text>
   <line class="timer-hours" x1="41.666666666667%" y1="0" x2="41.666666666667%" y2="325"></line>
   <text x="41.666666666667%" y="340" text-anchor="middle" fill="black">5H</text>
   <line class="timer-hours" x1="50%" y1="0" x2="50%" y2="325"></line>
   <text x="50%" y="340" text-anchor="middle" fill="black">6H</text>
   <line class="timer-hours" x1="58.333333333333%" y1="0" x2="58.333333333333%" y2="325"></line>
   <text x="58.333333333333%" y="340" text-anchor="middle" fill="black">7H</text>
   <line class="timer-hours" x1="66.666666666667%" y1="0" x2="66.666666666667%" y2="325"></line>
   <text x="66.666666666667%" y="340" text-anchor="middle" fill="black">8H</text>
   <line class="timer-hours" x1="75%" y1="0" x2="75%" y2="325"></line>
   <text x="75%" y="340" text-anchor="middle" fill="black">9H</text>
   <line class="timer-hours" x1="83.333333333333%" y1="0" x2="83.333333333333%" y2="325"></line>
   <text x="83.333333333333%" y="340" text-anchor="middle" fill="black">10H</text>
   <line class="timer-hours" x1="91.666666666667%" y1="0" x2="91.666666666667%" y2="325"></line>
   <text x="91.666666666667%" y="340" text-anchor="middle" fill="black">11H</text>
   <line class="timer-quarters" x1="2.0833333333333%" y1="0" x2="2.0833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="4.1666666666667%" y1="0" x2="4.1666666666667%" y2="350"></line>
   <line class="timer-quarters" x1="6.25%" y1="0" x2="6.25%" y2="350"></line>
   <line class="timer-quarters" x1="10.416666666667%" y1="0" x2="10.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="12.5%" y1="0" x2="12.5%" y2="350"></line>
   <line class="timer-quarters" x1="14.583333333333%" y1="0" x2="14.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="18.75%" y1="0" x2="18.75%" y2="350"></line>
   <line class="timer-quarters" x1="20.833333333333%" y1="0" x2="20.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="22.916666666667%" y1="0" x2="22.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="27.083333333333%" y1="0" x2="27.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="29.166666666667%" y1="0" x2="29.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="31.25%" y1="0" x2="31.25%" y2="350"></line>
   <line class="timer-quarters" x1="35.416666666667%" y1="0" x2="35.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="37.5%" y1="0" x2="37.5%" y2="350"></line>
   <line class="timer-quarters" x1="39.583333333333%" y1="0" x2="39.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="43.75%" y1="0" x2="43.75%" y2="350"></line>
   <line class="timer-quarters" x1="45.833333333333%" y1="0" x2="45.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="47.916666666667%" y1="0" x2="47.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="52.083333333333%" y1="0" x2="52.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="54.166666666667%" y1="0" x2="54.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="56.25%" y1="0" x2="56.25%" y2="350"></line>
   <line class="timer-quarters" x1="60.416666666667%" y1="0" x2="60.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="62.5%" y1="0" x2="62.5%" y2="350"></line>
   <line class="timer-quarters" x1="64.583333333333%" y1="0" x2="64.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="68.75%" y1="0" x2="68.75%" y2="350"></line>
   <line class="timer-quarters" x1="70.833333333333%" y1="0" x2="70.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="72.916666666667%" y1="0" x2="72.916666666667%" y2="350"></line>
   <line class="timer-quarters" x1="77.083333333333%" y1="0" x2="77.083333333333%" y2="350"></line>
   <line class="timer-quarters" x1="79.166666666667%" y1="0" x2="79.166666666667%" y2="350"></line>
   <line class="timer-quarters" x1="81.25%" y1="0" x2="81.25%" y2="350"></line>
   <line class="timer-quarters" x1="85.416666666667%" y1="0" x2="85.416666666667%" y2="350"></line>
   <line class="timer-quarters" x1="87.5%" y1="0" x2="87.5%" y2="350"></line>
   <line class="timer-quarters" x1="89.583333333333%" y1="0" x2="89.583333333333%" y2="350"></line>
   <line class="timer-quarters" x1="93.75%" y1="0" x2="93.75%" y2="350"></line>
   <line class="timer-quarters" x1="95.833333333333%" y1="0" x2="95.833333333333%" y2="350"></line>
   <line class="timer-quarters" x1="97.916666666667%" y1="0" x2="97.916666666667%" y2="350"></line>
</svg>

【讨论】：

是的，但它只适用于线条和笔画宽度 >= 1。较小的线条有时不会显示。
您必须小心确保在像素边界上绘制此类线条。

【解决方案2】：

线条有不同的粗细——为什么它们的“粗细”不一样？

答案是“因为抗锯齿”。抗锯齿是沿形状边缘使用半透明像素。目的是平滑边缘的外观，以模拟形状边缘仅覆盖部分边缘像素的事实。因此，例如，仅覆盖一半像素的黑色形状将被绘制为 50% 透明的黑色像素。假设它在白色背景上，产生一个 50% 的灰色像素。

您的线条由于抗锯齿而具有不稳定的宽度，并且您的线条位于相对于像素边界不一致的位置这一事实会加剧这种情况。

抗锯齿很棒，但也有局限性。使用shape-rendering="crispEdges" 可以提供帮助。但可能更好的解决方案是选择图形大小，以便图形线与像素边界对齐。您必须选择整个像素坐标或一半 (0.5) 坐标值，具体取决于您的 stroke-width 是偶数还是奇数。

【讨论】：