用于打印的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>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

SVG来自

Answer 1

您可以在 img 标记中使用 svg ，并通过jquery附加，如下面的代码段我希望有帮助，并且它适用于打印 < strong> 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>