FIDDLE

Question

FIDDLE

HTML

checkEmail <- function(searchString="from: X@example.com [Test]: New Order",minutesThreshold=20){

  searchResults<- messages(searchString) %>% 
    unlist(.,recursive = FALSE)

  cat(
    paste0(
      searchResults$resultSizeEstimate," results found for ",searchString,"\n"))

  # extract bookings
  searchResultsDf <- dplyr::bind_rows(searchResults$messages)

  selectid <- vector()

  for(i in 1:nrow(searchResultsDf)){
    # get individual ID  
    id <- searchResultsDf$id[i]
    #extract message
    resultMessage <- message(id, format = "full")
    # Get the time received of the message
    timeReceived <- resultMessage$internalDate %>%
      as.numeric() %>% 
      `/`(1000) %>%
      as.POSIXct(origin= "1970-01-01")

    cat(paste0("Message received at ",timeReceived,"\n"))

    # if it was a long time ago ignore
    if(
      (timeReceived) < (Sys.time()-minutesThreshold*60)
    ){
      cat("No recent messages found \n")
      break
    }else{
      selectid[i] <- id
    }
  }
  return(selectid)
}

CSS

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

说明

我想画11条线，每个小时一线-都一样（timer-hours课）。他们下面有一段文字。至此一切正常。

问题

线条的厚度不同-为什么它们的“厚度”不同？

我有两个不同的屏幕，并且两个屏幕上都有问题。

我也尝试过

#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;
}

但没有变化。

我需要另一个单位（px）吗？

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

屏幕截图

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

Answer 2

线条的厚度不同-为什么它们的“厚度”不同？

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

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

抗锯齿功能很棒，但有其局限性。使用shape-rendering="crispEdges"可以有所帮助。但是，可能更好的解决方案是选择图形大小，以使图形线与像素边界对齐。您必须根据stroke-width是偶数还是奇数来选择整个像素坐标或一半（0.5）坐标值。

有关更多信息，请参见以下答案：

https://stackoverflow.com/a/23376793/1292848

SVG线以不同方式显示

FIDDLE

HTML

CSS

说明

问题

屏幕截图

2 个答案: