Блог

Я динамично вводлю некоторый элемент в SVG В этом SVG, я хочу ввести qr-код, сгенерированный этой библиотекой. Сгенерированный qr-код differents имеет разный путь и разный размер

На этом изображении мы видим, что красный и черный qr не одинакового размера, я хотел бы сохранить одинаковые пропорции между двумя поколениями https://ibb.co/k96tnXw

В моем процессе я получаю svg qr-кода с помощью библиотеки, я выбираю только путь и вводю статический svg.

Что я могу сделать, чтобы сохранить одинаковый размер для всех сгенерированных qr-кодов ?

Образец сгенерированного sgv

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1080 1080">
<defs>
    <style>
        .circle {
        fill: #fff;
        stroke-width: 30px;
        }
        
        .phone {
        fill: #e23234;
        stroke: #e23234;
        }
        
        .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
        font-family: SourceSansPro-SemiBold;
        }
        
        .cls-1, .cls-3, .cls-5 {
        font-weight: 600;
        }
        
        .cls-1, .cls-2 {
        font-size: 30px;
        }
        
        .cls-4, .cls-5 {
        font-size: 25px;
        }
        
        .cls-3 {
        font-size: 70px;
        }
        
        .color {
        stroke: #c3A374;
        }
    </style>
</defs>
<circle class="circle color" cx="540" cy="533.953" r="391.656" />
<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 300 100" width="25%" height="25%" x="37%" y="17%">
    <!-- here logo is injected -->
</svg>
<text id="table" x="50%" y="33%" class="cls-3" alignment-baseline="middle" text-anchor="middle">
</text>
<text id="text" x="50%" y="40%" class="cls-1" alignment-baseline="middle" text-anchor="middle">
    Accédez au menu !
</text>
<text x="50%" y="44%" class="cls-2" alignment-baseline="middle" text-anchor="middle">
    en scannant le QR code
</text>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" id="qr_code" viewBox="0 0 41 41" width="30%" height="30%" x="35%" y="45%" shape-rendering="crispEdges">
    <!-- here qrcode path is injected -->
    <!-- there is 2 sample of qrcode dynamicly generated -->
    <!-- smalled -->
    <path stroke="#000000" d="M4 4.5h7m1 0h2m2 0h4m6 0h3m1 0h7M4 5.5h1m5 0h1m2 0h3m1 0h5m3 0h3m2 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m3 0h3m1 0h1m1 0h3m3 0h3m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h1m2 0h1m3 0h1m3 0h1m4 0h1m1 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m2 0h4m1 0h2m2 0h3m1 0h1m1 0h1m1 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m4 0h1m1 0h1m2 0h2m3 0h1m1 0h2m1 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M14 11.5h1m1 0h1m1 0h2m1 0h1m1 0h1m1 0h3M6 12.5h1m1 0h3m1 0h1m1 0h1m2 0h6m1 0h3m1 0h2m3 0h1m2 0h1M4 13.5h4m3 0h1m2 0h1m1 0h1m7 0h1m1 0h1m1 0h1m1 0h1m2 0h4M6 14.5h1m2 0h3m8 0h1m4 0h1m2 0h1m1 0h1m1 0h5M5 15.5h1m1 0h1m1 0h1m3 0h2m2 0h3m3 0h2m2 0h1m1 0h2m2 0h1m1 0h2M4 16.5h1m1 0h2m1 0h3m1 0h1m1 0h3m1 0h4m1 0h1m2 0h4m1 0h1m3 0h1M4 17.5h2m1 0h3m2 0h4m1 0h3m3 0h2m3 0h3m1 0h1m1 0h3M5 18.5h3m2 0h1m3 0h1m2 0h1m1 0h2m2 0h3m2 0h3m4 0h2M5 19.5h2m1 0h1m3 0h5m1 0h1m2 0h1m1 0h4m1 0h2m2 0h1m1 0h3M5 20.5h1m2 0h1m1 0h3m1 0h4m3 0h2m1 0h4m2 0h2m2 0h1M5 21.5h1m2 0h1m5 0h2m1 0h1m2 0h1m1 0h1m1 0h1m5 0h2m1 0h3M4 22.5h7m4 0h1m1 0h1m1 0h3m1 0h3m4 0h1m1 0h1m1 0h1m1 0h1M5 23.5h5m2 0h1m2 0h1m1 0h1m1 0h3m1 0h3m9 0h1M5 24.5h1m2 0h1m1 0h2m1 0h3m1 0h1m1 0h1m5 0h1m2 0h1m1 0h2m1 0h1m2 0h1M7 25.5h1m1 0h1m1 0h4m4 0h1m4 0h1m2 0h2m7 0h1M4 26.5h1m1 0h1m3 0h1m1 0h1m2 0h3m4 0h3m1 0h3m1 0h1m2 0h4M5 27.5h1m1 0h3m1 0h1m1 0h2m1 0h1m3 0h1m2 0h3m2 0h2m1 0h1m3 0h1M4 28.5h1m1 0h2m1 0h2m2 0h2m2 0h4m1 0h4m1 0h6m2 0h1M12 29.5h1m1 0h2m2 0h2m2 0h2m1 0h2m1 0h1m3 0h1m1 0h1m1 0h1M4 30.5h7m4 0h2m1 0h6m2 0h3m1 0h1m1 0h2m1 0h2M4 31.5h1m5 0h1m1 0h1m1 0h1m2 0h1m1 0h1m2 0h1m2 0h4m3 0h1m3 0h1M4 32.5h1m1 0h3m1 0h1m1 0h2m5 0h1m1 0h4m1 0h1m1 0h6m1 0h1M4 33.5h1m1 0h3m1 0h1m2 0h3m1 0h4m5 0h2m4 0h2M4 34.5h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2m1 0h3m1 0h4m1 0h1M4 35.5h1m5 0h1m2 0h4m1 0h2m2 0h1m4 0h3m1 0h1m1 0h1m1 0h1M4 36.5h7m5 0h3m1 0h1m2 0h2m2 0h10" />
    <!-- biggest -->
    <path stroke="#F00000" d="M4 4.5h7m3 0h1m2 0h1m3 0h1m4 0h7M4 5.5h1m5 0h1m1 0h3m1 0h1m1 0h2m1 0h1m4 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m1 0h1m3 0h1m1 0h1m2 0h2m1 0h1m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h1m1 0h1m2 0h2m1 0h4m2 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m1 0h1m2 0h2m1 0h2m4 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h2m1 0h2m1 0h1m3 0h1m1 0h1m1 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M14 11.5h1m3 0h1m3 0h1m1 0h1M6 12.5h1m2 0h4m4 0h1m1 0h1m1 0h5m1 0h5M4 13.5h1m1 0h2m1 0h1m4 0h2m1 0h1m3 0h1m1 0h2m1 0h1m2 0h4M4 14.5h1m1 0h7m4 0h1m1 0h7m2 0h2m2 0h1M4 15.5h2m5 0h3m1 0h1m1 0h1m2 0h2m2 0h1m1 0h1m1 0h2M5 16.5h1m2 0h1m1 0h1m1 0h1m1 0h1m3 0h2m2 0h5m2 0h1m1 0h1M4 17.5h2m1 0h3m2 0h1m2 0h4m1 0h5m1 0h1m2 0h1m2 0h1M7 18.5h1m2 0h1m2 0h1m5 0h1m3 0h2m4 0h2m1 0h1M4 19.5h2m2 0h2m1 0h1m2 0h4m1 0h1m2 0h2m1 0h2m2 0h1m1 0h1M5 20.5h1m1 0h2m1 0h2m2 0h2m2 0h4m1 0h1m2 0h1m4 0h2M6 21.5h1m2 0h1m1 0h2m1 0h1m1 0h1m2 0h1m2 0h3m1 0h2m1 0h1m2 0h1M4 22.5h3m1 0h4m1 0h2m1 0h2m1 0h3m1 0h2m2 0h4m1 0h1M9 23.5h1m3 0h1m1 0h1m2 0h2m3 0h6M4 24.5h4m2 0h1m1 0h1m2 0h2m3 0h1m2 0h7m1 0h1M12 25.5h1m1 0h2m1 0h2m1 0h5m3 0h2m2 0h1M4 26.5h7m1 0h1m2 0h2m2 0h2m1 0h1m1 0h1m1 0h1m1 0h3m1 0h1M4 27.5h1m5 0h1m1 0h1m1 0h2m6 0h3m3 0h2m2 0h1M4 28.5h1m1 0h3m1 0h1m3 0h1m4 0h2m2 0h6m2 0h2M4 29.5h1m1 0h3m1 0h1m2 0h1m1 0h1m3 0h6m2 0h5M4 30.5h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h2m7 0h1m2 0h2m1 0h2M4 31.5h1m5 0h1m6 0h4m1 0h3m4 0h1M4 32.5h7m4 0h1m2 0h3m3 0h1m2 0h3m2 0h1" />
</svg>
<text x="50%" y="76%" class="cls-4" alignment-baseline="middle" text-anchor="middle">
    ou saisissez l’URL
</text>
<text id="url" x="50%" y="80%" class="cls-5" alignment-baseline="middle" text-anchor="middle">
    <!-- here url is injected -->
</text>
 

Спасибо