javascript - jQuery donut 插件 : Arrow doesn't show on print

Question

我试图使用这个 jQuery 插件在页面上显示 percentaje donut :

http://larentis.eu/donuts/

当我将代码添加到页面时，它运行良好，您可以看到一切正常:

但是当我进入打印预览时，我没有看到箭头指向 donut 上的百分比值:

经过一些研究，我看到了用于此插件的 css，箭头具有 .donut-arrow 类，并且具有以下相关样式:

/* line 38, ../sass/donuts.scss */
.donut .donut-arrow {
  height: 1em;
  width: .1em;
  margin-left: -.05em;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
/* line 49, ../sass/donuts.scss */
.donut .donut-arrow, .donut .donut-arrow:before {
  position: absolute;
  display: inline-block;
  background: #333;
  left: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 57, ../sass/donuts.scss */
.donut .donut-arrow:before {
  content: '';
  height: .2em;
  width: .2em;
  bottom: -.1em;
  margin-left: -.1em;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-borderradius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}    

我应该添加什么 css 样式才能在打印页面时看到这个箭头？

有什么想法吗？非常感谢!

更新: 我在这里添加了 jsfiddle:http://jsfiddle.net/KRcMg/

Answer 1

箭头本身是一个带有背景颜色的div:

.donut .donut-arrow, .donut .donut-arrow:before {
    background: #333;
}

打印时不显示背景。因此，您最好的选择可能是尝试使用相同的标记重新创建箭头，使用边框而不是背景颜色。

类似于:

.donut-arrow {
    width: 0;
    border: .05em solid #000;
}

您需要使用 em 来调整边框的大小，因为这样您可以根据父类保持不同大小的箭头。