用于打印的 SVG 背景图像平铺

Question

如果我使用 SVG 平铺作为网站的背景，在浏览器中查看时它看起来不错，但如果打印出来，则会以一种奇怪的不均匀方式缩放。有没有办法让浏览器打印不失真

这方面的一个例子是here，它看起来像这样：

但在打印时看起来像这样：

 <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
<rect width='10' height='10' fill='#fff'/>
<rect width='5' height='5' fill='#ccc'/>
</svg>

#test {
  height: 500px;
  width:500px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjY2NjIj48L3JlY3Q+Cjwvc3ZnPg==");
}

<div id="test">
</div>

SVG 来自

Answer 1

您可以在 img 标记中使用 svg 并通过 jquery 附加如下 sn-p 我希望对您有所帮助，它适用于 print在 Chrome 和 FF 浏览器上。

$(document).ready(function(){
	var squareBox = 3000; //You can increase and descrease of square boxes
	for (var i = 1; i <= squareBox; i++) {
		$('#test').append('<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+CjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjY2NjIj48L3JlY3Q+Cjwvc3ZnPg==">');
	}
})

#test{
height: 500px;
width: 500px;
overflow: hidden;
}
#test img{
width: 10px;
height: 10px;
display: block;
float: left;
margin-top: 0px;
}
@media print and (color){
*{
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
button{display: none;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" onclick="window.print();">Print</button>

<div id="test"></div>