tohokuaikiのチラシの裏

技術的ネタとか。

endroid/qr-codeのSVGでQRコードを作って2つ以上置くと問題が生じる件

Packagistでqrcodeと検索すると一番上に出てくるパッケージがこれ。

SVG出力もしてくれて使いやすいんだけど、SVGQRコードを2つ以上置くときに問題が発生した。

f:id:tohokuaiki:20201006190857p:plain
こんな感じになってしまう。
(左のQRコードの真ん中が黒いのはQRコードを読めないようにしただけ)

原因

原因は、1つ目のQRコード

<defs><rect id="block" width="3" height="3" fill="#000000" fill-opacity="1"/></defs>

としていて、2つ目のQRコード

<defs><rect id="block" width="6" height="6" fill="#000000" fill-opacity="1"/></defs>

としているんだけど、このrect#blockが被ってしまっているので、1つ目のwidth/heightを2つ目のQRコードにも使ってしまうのであった。

対応

コードを見たら

https://github.com/endroid/qr-code/blob/759e7745a80c17ab3b6b946550451413df0795d1/src/Writer/SvgWriter.php#L41

        $blockDefinition->addAttribute('id', 'block');

https://github.com/endroid/qr-code/blob/759e7745a80c17ab3b6b946550451413df0795d1/src/Writer/SvgWriter.php#L45

                    $block->addAttribute('xlink:href', '#block', 'http://www.w3.org/1999/xlink');

おぉっと、これはハードコーディングですね。

ということで、これは出力したSVGタグをstr_replaceで回避するしかない…プルリクエスト出しておいたらAcceptされてめでたしめでたし。