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

您可以使用SVG在IMG标签和追加通过jQuery像下面摘录我希望帮助，这是对工作的罚款打印铬和FF浏览器。

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

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