Closed ThomasLandauer closed 2 years ago
Hello, I have the same issue I am using phpqrcode lib for qr code generation, http://phpqrcode.sourceforge.net/
Was just taking a quick look at this. I wonder if there's a mis-translation due to the resolution used by the QRCode library vs php-svg-lib. endroid/qr-code generates the QR code using a single square reference that is placed throughout the SVG. If I update the width/height of the document and the square it appears to render as expected by php-svg-lib (though that totally munges browser rendering).
Here's the updated SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="240px" height="240px" viewBox="0 0 240 240"><defs><rect id="block" width="6" height="6" fill="#000000" fill-opacity="1"/></defs><rect x="0" y="0" width="240" height="240" fill="#ffffff" fill-opacity="1"/><use x="16" y="16" xlink:href="#block"/><use x="19" y="16" xlink:href="#block"/><use x="22" y="16" xlink:href="#block"/><use x="25" y="16" xlink:href="#block"/><use x="28" y="16" xlink:href="#block"/><use x="31" y="16" xlink:href="#block"/><use x="34" y="16" xlink:href="#block"/><use x="43" y="16" xlink:href="#block"/><use x="61" y="16" xlink:href="#block"/><use x="70" y="16" xlink:href="#block"/><use x="82" y="16" xlink:href="#block"/><use x="85" y="16" xlink:href="#block"/><use x="88" y="16" xlink:href="#block"/><use x="91" y="16" xlink:href="#block"/><use x="94" y="16" xlink:href="#block"/><use x="97" y="16" xlink:href="#block"/><use x="100" y="16" xlink:href="#block"/><use x="16" y="19" xlink:href="#block"/><use x="34" y="19" xlink:href="#block"/><use x="40" y="19" xlink:href="#block"/><use x="43" y="19" xlink:href="#block"/><use x="49" y="19" xlink:href="#block"/><use x="52" y="19" xlink:href="#block"/><use x="58" y="19" xlink:href="#block"/><use x="61" y="19" xlink:href="#block"/><use x="67" y="19" xlink:href="#block"/><use x="82" y="19" xlink:href="#block"/><use x="100" y="19" xlink:href="#block"/><use x="16" y="22" xlink:href="#block"/><use x="22" y="22" xlink:href="#block"/><use x="25" y="22" xlink:href="#block"/><use x="28" y="22" xlink:href="#block"/><use x="34" y="22" xlink:href="#block"/><use x="43" y="22" xlink:href="#block"/><use x="46" y="22" xlink:href="#block"/><use x="49" y="22" xlink:href="#block"/><use x="58" y="22" xlink:href="#block"/><use x="70" y="22" xlink:href="#block"/><use x="73" y="22" xlink:href="#block"/><use x="82" y="22" xlink:href="#block"/><use x="88" y="22" xlink:href="#block"/><use x="91" y="22" xlink:href="#block"/><use x="94" y="22" xlink:href="#block"/><use x="100" y="22" xlink:href="#block"/><use x="16" y="25" xlink:href="#block"/><use x="22" y="25" xlink:href="#block"/><use x="25" y="25" xlink:href="#block"/><use x="28" y="25" xlink:href="#block"/><use x="34" y="25" xlink:href="#block"/><use x="40" y="25" xlink:href="#block"/><use x="43" y="25" xlink:href="#block"/><use x="49" y="25" xlink:href="#block"/><use x="61" y="25" xlink:href="#block"/><use x="64" y="25" xlink:href="#block"/><use x="67" y="25" xlink:href="#block"/><use x="70" y="25" xlink:href="#block"/><use x="76" y="25" xlink:href="#block"/><use x="82" y="25" xlink:href="#block"/><use x="88" y="25" xlink:href="#block"/><use x="91" y="25" xlink:href="#block"/><use x="94" y="25" xlink:href="#block"/><use x="100" y="25" xlink:href="#block"/><use x="16" y="28" xlink:href="#block"/><use x="22" y="28" xlink:href="#block"/><use x="25" y="28" xlink:href="#block"/><use x="28" y="28" xlink:href="#block"/><use x="34" y="28" xlink:href="#block"/><use x="46" y="28" xlink:href="#block"/><use x="52" y="28" xlink:href="#block"/><use x="58" y="28" xlink:href="#block"/><use x="64" y="28" xlink:href="#block"/><use x="70" y="28" xlink:href="#block"/><use x="73" y="28" xlink:href="#block"/><use x="76" y="28" xlink:href="#block"/><use x="82" y="28" xlink:href="#block"/><use x="88" y="28" xlink:href="#block"/><use x="91" y="28" xlink:href="#block"/><use x="94" y="28" xlink:href="#block"/><use x="100" y="28" xlink:href="#block"/><use x="16" y="31" xlink:href="#block"/><use x="34" y="31" xlink:href="#block"/><use x="40" y="31" xlink:href="#block"/><use x="46" y="31" xlink:href="#block"/><use x="58" y="31" xlink:href="#block"/><use x="61" y="31" xlink:href="#block"/><use x="67" y="31" xlink:href="#block"/><use x="73" y="31" xlink:href="#block"/><use x="82" y="31" xlink:href="#block"/><use x="100" y="31" xlink:href="#block"/><use x="16" y="34" xlink:href="#block"/><use x="19" y="34" xlink:href="#block"/><use x="22" y="34" xlink:href="#block"/><use x="25" y="34" xlink:href="#block"/><use x="28" y="34" xlink:href="#block"/><use x="31" y="34" xlink:href="#block"/><use x="34" y="34" xlink:href="#block"/><use x="40" y="34" xlink:href="#block"/><use x="46" y="34" xlink:href="#block"/><use x="52" y="34" xlink:href="#block"/><use x="58" y="34" xlink:href="#block"/><use x="64" y="34" xlink:href="#block"/><use x="70" y="34" xlink:href="#block"/><use x="76" y="34" xlink:href="#block"/><use x="82" y="34" xlink:href="#block"/><use x="85" y="34" xlink:href="#block"/><use x="88" y="34" xlink:href="#block"/><use x="91" y="34" xlink:href="#block"/><use x="94" y="34" xlink:href="#block"/><use x="97" y="34" xlink:href="#block"/><use x="100" y="34" xlink:href="#block"/><use x="52" y="37" xlink:href="#block"/><use x="58" y="37" xlink:href="#block"/><use x="64" y="37" xlink:href="#block"/><use x="70" y="37" xlink:href="#block"/><use x="73" y="37" xlink:href="#block"/><use x="76" y="37" xlink:href="#block"/><use x="16" y="40" xlink:href="#block"/><use x="19" y="40" xlink:href="#block"/><use x="22" y="40" xlink:href="#block"/><use x="25" y="40" xlink:href="#block"/><use x="28" y="40" xlink:href="#block"/><use x="34" y="40" xlink:href="#block"/><use x="37" y="40" xlink:href="#block"/><use x="40" y="40" xlink:href="#block"/><use x="43" y="40" xlink:href="#block"/><use x="46" y="40" xlink:href="#block"/><use x="52" y="40" xlink:href="#block"/><use x="55" y="40" xlink:href="#block"/><use x="61" y="40" xlink:href="#block"/><use x="79" y="40" xlink:href="#block"/><use x="85" y="40" xlink:href="#block"/><use x="91" y="40" xlink:href="#block"/><use x="97" y="40" xlink:href="#block"/><use x="16" y="43" xlink:href="#block"/><use x="22" y="43" xlink:href="#block"/><use x="31" y="43" xlink:href="#block"/><use x="40" y="43" xlink:href="#block"/><use x="43" y="43" xlink:href="#block"/><use x="64" y="43" xlink:href="#block"/><use x="76" y="43" xlink:href="#block"/><use x="82" y="43" xlink:href="#block"/><use x="85" y="43" xlink:href="#block"/><use x="91" y="43" xlink:href="#block"/><use x="19" y="46" xlink:href="#block"/><use x="25" y="46" xlink:href="#block"/><use x="31" y="46" xlink:href="#block"/><use x="34" y="46" xlink:href="#block"/><use x="37" y="46" xlink:href="#block"/><use x="40" y="46" xlink:href="#block"/><use x="43" y="46" xlink:href="#block"/><use x="49" y="46" xlink:href="#block"/><use x="52" y="46" xlink:href="#block"/><use x="55" y="46" xlink:href="#block"/><use x="67" y="46" xlink:href="#block"/><use x="70" y="46" xlink:href="#block"/><use x="76" y="46" xlink:href="#block"/><use x="79" y="46" xlink:href="#block"/><use x="94" y="46" xlink:href="#block"/><use x="97" y="46" xlink:href="#block"/><use x="100" y="46" xlink:href="#block"/><use x="16" y="49" xlink:href="#block"/><use x="19" y="49" xlink:href="#block"/><use x="25" y="49" xlink:href="#block"/><use x="28" y="49" xlink:href="#block"/><use x="31" y="49" xlink:href="#block"/><use x="37" y="49" xlink:href="#block"/><use x="40" y="49" xlink:href="#block"/><use x="43" y="49" xlink:href="#block"/><use x="46" y="49" xlink:href="#block"/><use x="49" y="49" xlink:href="#block"/><use x="64" y="49" xlink:href="#block"/><use x="70" y="49" xlink:href="#block"/><use x="73" y="49" xlink:href="#block"/><use x="76" y="49" xlink:href="#block"/><use x="79" y="49" xlink:href="#block"/><use x="82" y="49" xlink:href="#block"/><use x="85" y="49" xlink:href="#block"/><use x="88" y="49" xlink:href="#block"/><use x="91" y="49" xlink:href="#block"/><use x="97" y="49" xlink:href="#block"/><use x="100" y="49" xlink:href="#block"/><use x="19" y="52" xlink:href="#block"/><use x="22" y="52" xlink:href="#block"/><use x="25" y="52" xlink:href="#block"/><use x="34" y="52" xlink:href="#block"/><use x="40" y="52" xlink:href="#block"/><use x="43" y="52" xlink:href="#block"/><use x="49" y="52" xlink:href="#block"/><use x="61" y="52" xlink:href="#block"/><use x="64" y="52" xlink:href="#block"/><use x="70" y="52" xlink:href="#block"/><use x="79" y="52" xlink:href="#block"/><use x="85" y="52" xlink:href="#block"/><use x="94" y="52" xlink:href="#block"/><use x="28" y="55" xlink:href="#block"/><use x="31" y="55" xlink:href="#block"/><use x="46" y="55" xlink:href="#block"/><use x="52" y="55" xlink:href="#block"/><use x="61" y="55" xlink:href="#block"/><use x="70" y="55" xlink:href="#block"/><use x="79" y="55" xlink:href="#block"/><use x="85" y="55" xlink:href="#block"/><use x="91" y="55" xlink:href="#block"/><use x="97" y="55" xlink:href="#block"/><use x="16" y="58" xlink:href="#block"/><use x="22" y="58" xlink:href="#block"/><use x="25" y="58" xlink:href="#block"/><use x="31" y="58" xlink:href="#block"/><use x="34" y="58" xlink:href="#block"/><use x="37" y="58" xlink:href="#block"/><use x="43" y="58" xlink:href="#block"/><use x="55" y="58" xlink:href="#block"/><use x="58" y="58" xlink:href="#block"/><use x="67" y="58" xlink:href="#block"/><use x="94" y="58" xlink:href="#block"/><use x="100" y="58" xlink:href="#block"/><use x="16" y="61" xlink:href="#block"/><use x="25" y="61" xlink:href="#block"/><use x="37" y="61" xlink:href="#block"/><use x="40" y="61" xlink:href="#block"/><use x="52" y="61" xlink:href="#block"/><use x="64" y="61" xlink:href="#block"/><use x="70" y="61" xlink:href="#block"/><use x="73" y="61" xlink:href="#block"/><use x="82" y="61" xlink:href="#block"/><use x="85" y="61" xlink:href="#block"/><use x="88" y="61" xlink:href="#block"/><use x="91" y="61" xlink:href="#block"/><use x="97" y="61" xlink:href="#block"/><use x="16" y="64" xlink:href="#block"/><use x="19" y="64" xlink:href="#block"/><use x="28" y="64" xlink:href="#block"/><use x="31" y="64" xlink:href="#block"/><use x="34" y="64" xlink:href="#block"/><use x="37" y="64" xlink:href="#block"/><use x="46" y="64" xlink:href="#block"/><use x="52" y="64" xlink:href="#block"/><use x="55" y="64" xlink:href="#block"/><use x="61" y="64" xlink:href="#block"/><use x="67" y="64" xlink:href="#block"/><use x="79" y="64" xlink:href="#block"/><use x="88" y="64" xlink:href="#block"/><use x="91" y="64" xlink:href="#block"/><use x="16" y="67" xlink:href="#block"/><use x="22" y="67" xlink:href="#block"/><use x="31" y="67" xlink:href="#block"/><use x="37" y="67" xlink:href="#block"/><use x="58" y="67" xlink:href="#block"/><use x="61" y="67" xlink:href="#block"/><use x="64" y="67" xlink:href="#block"/><use x="76" y="67" xlink:href="#block"/><use x="82" y="67" xlink:href="#block"/><use x="85" y="67" xlink:href="#block"/><use x="88" y="67" xlink:href="#block"/><use x="100" y="67" xlink:href="#block"/><use x="16" y="70" xlink:href="#block"/><use x="25" y="70" xlink:href="#block"/><use x="28" y="70" xlink:href="#block"/><use x="31" y="70" xlink:href="#block"/><use x="34" y="70" xlink:href="#block"/><use x="40" y="70" xlink:href="#block"/><use x="43" y="70" xlink:href="#block"/><use x="46" y="70" xlink:href="#block"/><use x="49" y="70" xlink:href="#block"/><use x="52" y="70" xlink:href="#block"/><use x="55" y="70" xlink:href="#block"/><use x="58" y="70" xlink:href="#block"/><use x="61" y="70" xlink:href="#block"/><use x="64" y="70" xlink:href="#block"/><use x="67" y="70" xlink:href="#block"/><use x="76" y="70" xlink:href="#block"/><use x="85" y="70" xlink:href="#block"/><use x="94" y="70" xlink:href="#block"/><use x="97" y="70" xlink:href="#block"/><use x="100" y="70" xlink:href="#block"/><use x="16" y="73" xlink:href="#block"/><use x="22" y="73" xlink:href="#block"/><use x="25" y="73" xlink:href="#block"/><use x="28" y="73" xlink:href="#block"/><use x="31" y="73" xlink:href="#block"/><use x="37" y="73" xlink:href="#block"/><use x="43" y="73" xlink:href="#block"/><use x="46" y="73" xlink:href="#block"/><use x="49" y="73" xlink:href="#block"/><use x="55" y="73" xlink:href="#block"/><use x="64" y="73" xlink:href="#block"/><use x="70" y="73" xlink:href="#block"/><use x="73" y="73" xlink:href="#block"/><use x="76" y="73" xlink:href="#block"/><use x="79" y="73" xlink:href="#block"/><use x="82" y="73" xlink:href="#block"/><use x="85" y="73" xlink:href="#block"/><use x="88" y="73" xlink:href="#block"/><use x="97" y="73" xlink:href="#block"/><use x="100" y="73" xlink:href="#block"/><use x="16" y="76" xlink:href="#block"/><use x="22" y="76" xlink:href="#block"/><use x="25" y="76" xlink:href="#block"/><use x="31" y="76" xlink:href="#block"/><use x="34" y="76" xlink:href="#block"/><use x="37" y="76" xlink:href="#block"/><use x="46" y="76" xlink:href="#block"/><use x="49" y="76" xlink:href="#block"/><use x="52" y="76" xlink:href="#block"/><use x="55" y="76" xlink:href="#block"/><use x="58" y="76" xlink:href="#block"/><use x="61" y="76" xlink:href="#block"/><use x="64" y="76" xlink:href="#block"/><use x="76" y="76" xlink:href="#block"/><use x="79" y="76" xlink:href="#block"/><use x="82" y="76" xlink:href="#block"/><use x="85" y="76" xlink:href="#block"/><use x="88" y="76" xlink:href="#block"/><use x="97" y="76" xlink:href="#block"/><use x="40" y="79" xlink:href="#block"/><use x="43" y="79" xlink:href="#block"/><use x="52" y="79" xlink:href="#block"/><use x="58" y="79" xlink:href="#block"/><use x="61" y="79" xlink:href="#block"/><use x="76" y="79" xlink:href="#block"/><use x="88" y="79" xlink:href="#block"/><use x="91" y="79" xlink:href="#block"/><use x="97" y="79" xlink:href="#block"/><use x="16" y="82" xlink:href="#block"/><use x="19" y="82" xlink:href="#block"/><use x="22" y="82" xlink:href="#block"/><use x="25" y="82" xlink:href="#block"/><use x="28" y="82" xlink:href="#block"/><use x="31" y="82" xlink:href="#block"/><use x="34" y="82" xlink:href="#block"/><use x="40" y="82" xlink:href="#block"/><use x="52" y="82" xlink:href="#block"/><use x="55" y="82" xlink:href="#block"/><use x="58" y="82" xlink:href="#block"/><use x="61" y="82" xlink:href="#block"/><use x="67" y="82" xlink:href="#block"/><use x="73" y="82" xlink:href="#block"/><use x="76" y="82" xlink:href="#block"/><use x="82" y="82" xlink:href="#block"/><use x="88" y="82" xlink:href="#block"/><use x="94" y="82" xlink:href="#block"/><use x="16" y="85" xlink:href="#block"/><use x="34" y="85" xlink:href="#block"/><use x="43" y="85" xlink:href="#block"/><use x="52" y="85" xlink:href="#block"/><use x="64" y="85" xlink:href="#block"/><use x="67" y="85" xlink:href="#block"/><use x="70" y="85" xlink:href="#block"/><use x="76" y="85" xlink:href="#block"/><use x="88" y="85" xlink:href="#block"/><use x="94" y="85" xlink:href="#block"/><use x="97" y="85" xlink:href="#block"/><use x="100" y="85" xlink:href="#block"/><use x="16" y="88" xlink:href="#block"/><use x="22" y="88" xlink:href="#block"/><use x="25" y="88" xlink:href="#block"/><use x="28" y="88" xlink:href="#block"/><use x="34" y="88" xlink:href="#block"/><use x="40" y="88" xlink:href="#block"/><use x="58" y="88" xlink:href="#block"/><use x="61" y="88" xlink:href="#block"/><use x="67" y="88" xlink:href="#block"/><use x="76" y="88" xlink:href="#block"/><use x="79" y="88" xlink:href="#block"/><use x="82" y="88" xlink:href="#block"/><use x="85" y="88" xlink:href="#block"/><use x="88" y="88" xlink:href="#block"/><use x="91" y="88" xlink:href="#block"/><use x="97" y="88" xlink:href="#block"/><use x="100" y="88" xlink:href="#block"/><use x="16" y="91" xlink:href="#block"/><use x="22" y="91" xlink:href="#block"/><use x="25" y="91" xlink:href="#block"/><use x="28" y="91" xlink:href="#block"/><use x="34" y="91" xlink:href="#block"/><use x="40" y="91" xlink:href="#block"/><use x="49" y="91" xlink:href="#block"/><use x="52" y="91" xlink:href="#block"/><use x="70" y="91" xlink:href="#block"/><use x="73" y="91" xlink:href="#block"/><use x="76" y="91" xlink:href="#block"/><use x="79" y="91" xlink:href="#block"/><use x="82" y="91" xlink:href="#block"/><use x="88" y="91" xlink:href="#block"/><use x="91" y="91" xlink:href="#block"/><use x="16" y="94" xlink:href="#block"/><use x="22" y="94" xlink:href="#block"/><use x="25" y="94" xlink:href="#block"/><use x="28" y="94" xlink:href="#block"/><use x="34" y="94" xlink:href="#block"/><use x="40" y="94" xlink:href="#block"/><use x="43" y="94" xlink:href="#block"/><use x="46" y="94" xlink:href="#block"/><use x="55" y="94" xlink:href="#block"/><use x="58" y="94" xlink:href="#block"/><use x="61" y="94" xlink:href="#block"/><use x="64" y="94" xlink:href="#block"/><use x="67" y="94" xlink:href="#block"/><use x="73" y="94" xlink:href="#block"/><use x="79" y="94" xlink:href="#block"/><use x="88" y="94" xlink:href="#block"/><use x="91" y="94" xlink:href="#block"/><use x="94" y="94" xlink:href="#block"/><use x="97" y="94" xlink:href="#block"/><use x="16" y="97" xlink:href="#block"/><use x="34" y="97" xlink:href="#block"/><use x="40" y="97" xlink:href="#block"/><use x="49" y="97" xlink:href="#block"/><use x="64" y="97" xlink:href="#block"/><use x="70" y="97" xlink:href="#block"/><use x="73" y="97" xlink:href="#block"/><use x="76" y="97" xlink:href="#block"/><use x="100" y="97" xlink:href="#block"/><use x="16" y="100" xlink:href="#block"/><use x="19" y="100" xlink:href="#block"/><use x="22" y="100" xlink:href="#block"/><use x="25" y="100" xlink:href="#block"/><use x="28" y="100" xlink:href="#block"/><use x="31" y="100" xlink:href="#block"/><use x="34" y="100" xlink:href="#block"/><use x="40" y="100" xlink:href="#block"/><use x="58" y="100" xlink:href="#block"/><use x="61" y="100" xlink:href="#block"/><use x="64" y="100" xlink:href="#block"/><use x="73" y="100" xlink:href="#block"/><use x="76" y="100" xlink:href="#block"/><use x="79" y="100" xlink:href="#block"/><use x="82" y="100" xlink:href="#block"/><use x="88" y="100" xlink:href="#block"/><use x="91" y="100" xlink:href="#block"/><use x="94" y="100" xlink:href="#block"/></svg>
@bsweeney From my testing this appeared to be due to how the <use>
tag attributes were merged down and passed to the referenced shape. Positional transformation would end up being applied for both the <use>
tag and shape, causing double offsetting.
PR #87 arose from looking into this issue, and is specifically aimed to fix this scenario.
Follow up of https://github.com/dompdf/dompdf/issues/2137
I'm using https://github.com/endroid/qr-code to create a QR code, as in the example shown there:
Then I'm rendering it base64_encoded in Twig:
And here's what I'm getting in the PDF:
If I output the generated SVG directly (echo $qrCode->writeString();) it looks just like a normal QR code. Same if I send the Twig result to the browser (instead of passing it to dompdf).
Here's the SVG: