用於打印的SVG背景圖像拼貼

如果我使用SVG拼貼作爲網站的背景，在瀏覽器中查看時看起來很好，但如果打印，則會以奇怪的不均勻方式縮放。有沒有辦法讓不失真瀏覽器打印用於打印的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是

來源

2016-11-28 JZL003

看起來像Chrome錯誤，在FF工作正常。你應該在他們的bug跟蹤器上打開一個bug。 – Kaiido

您可以使用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>

來源

2016-11-28 07:20:28

認真嗎？用一噸img標籤替換背景重複？ – Kaiido

是的，因爲當我嘗試通過css打印您的代碼作爲背景並打印時，這在打印視圖中會出現在chrome上。所以如果你通過for循環重複多個相同的圖像。我認爲你的打印問題會解決。 –

這不是我的，我不是OP，但是這樣做很可能會造成很多內存問題... – Kaiido

用於打印的SVG背景圖像拼貼

回答

相關問題