Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG does not display in Firefox #436

Open
sjvudp opened this issue Nov 3, 2023 · 2 comments
Open

SVG does not display in Firefox #436

sjvudp opened this issue Nov 3, 2023 · 2 comments

Comments

@sjvudp
Copy link

sjvudp commented Nov 3, 2023

Following the example shown in https://lindell.me/JsBarcode/ I used code like this to create a CODE39 barcode:

<table>
  <tr><td><svg id="BC-Test"/></td></tr>
</table>
<script type="text/javascript">JsBarcode('#BC-Test', 'Test');</script>

When running the code, SVG is generated, but Firefox does not display anything:
<svg id="BC-Test" width="212px" height="142px" x="0px" y="0px" viewbox="0 0 212 142" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="212" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="2" height="100"></rect><rect x="8" y="0" width="2" height="100"></rect><rect x="12" y="0" width="6" height="100"></rect><rect x="20" y="0" width="6" height="100"></rect><rect x="28" y="0" width="2" height="100"></rect><rect x="32" y="0" width="2" height="100"></rect><rect x="36" y="0" width="2" height="100"></rect><rect x="40" y="0" width="6" height="100"></rect><rect x="48" y="0" width="6" height="100"></rect><rect x="60" y="0" width="2" height="100"></rect><rect x="64" y="0" width="6" height="100"></rect><rect x="72" y="0" width="2" height="100"></rect><rect x="76" y="0" width="6" height="100"></rect><rect x="88" y="0" width="2" height="100"></rect><rect x="92" y="0" width="2" height="100"></rect><rect x="96" y="0" width="2" height="100"></rect><rect x="100" y="0" width="6" height="100"></rect><rect x="108" y="0" width="2" height="100"></rect><rect x="112" y="0" width="6" height="100"></rect><rect x="124" y="0" width="2" height="100"></rect><rect x="128" y="0" width="2" height="100"></rect><rect x="132" y="0" width="2" height="100"></rect><rect x="136" y="0" width="6" height="100"></rect><rect x="144" y="0" width="6" height="100"></rect><rect x="156" y="0" width="2" height="100"></rect><rect x="160" y="0" width="2" height="100"></rect><rect x="168" y="0" width="2" height="100"></rect><rect x="172" y="0" width="6" height="100"></rect><rect x="180" y="0" width="6" height="100"></rect><rect x="188" y="0" width="2" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="96" y="122">TEST</text></g></svg>
However when I replace <svg> with <img>, this output displays the barcode and text:
<img id="BC-Test" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANQAAACOCAYAAABJyyaJAAAJrUlEQVR4Xu2dP24UTRDFx0dA3IALkCA5gRT7BhyACAsRIXEFZFkElmwiJCILLoCAhABCrgA3QD4Cn2e9u9/OeGbe639DW/MjW7q3u+d1vap61T3rvb9X/xr+gQAIZEFgD0JlwZFBQGCFAITCEEAgIwIQKiOYDAUCEAobAIGMCECojGAyFAhAKGwABDIiAKEygslQIAChsAEQyIgAhMoIJkOBgE2ovb29FVpjFyv67ZvPfYg333fb+/3V59j5+t+LfR73+dz5Up+3tvWM7U8oHm7/WHtQ9j7mOiDUyM0rCNV1oGN4uIRVDtQlyL9y6G7shVAQatBWXAJBqC58EApCQagdBMZSbCLUGgHXg7oph8rJc8+Hhrp+GUJpmtgU3d1PCAWhOkWk3BomtwG7Dg0N1UPK9eC15vCuR6vFgF28Qw0aQg3HLDQUGgoNhYa6mVOriKDaXQ9NhBrWNApf1e7iT8pHytdBINQgKEpQlOhUZZRHV+3KoFyNkMtDhq53rH+oR47VLC4+c60nFx7uetV+qfbQn1xBQ6Gh0FBoKDSUirihEc31+CpjUB6fCLVG4F8frLll9NIbqsavLcWqbT0QCkIFacLaDLi29UAoCAWhrhCoJUMIrZKqjEK1U5SILNO7GsLdAKVx3PlSNQsRqou0i4eSOIOVnNbxXE1g/RSzmiBUBCuDcz1iKECpKQeE4mB3jEzt/0MoyuaUzSmbUzaPjfCpETo1Bc01v5syq4xCtZsJ3HYYIhQRighFhCJCEaG6fqC0hp/STbttRCgiFBGKCEWEIkIRoVYIhJa5lQgOHS9VFLsiVhm8K6rV89+29aTiz8FuD8FQAiiDCh0vdUNvmwG7+MxF8FT8IRSE6iAQahDKodw2gkOoNQLclLj+JdXbZsBEqO6OuXgoex+r+lHlo8pHlY8qH1U+VfQIPZdBQ10jMJZij0WkG7hxOXb4bnCoQYb2n8uA3RRnrvWgodBQKwRua0SAUGiojgGrKpdrMIoQroemKMHrG1PpH0UJihIUJShKUJRQEbdWTYeGQkOhoXY0pErBVUoMoSAUhIJQbtWcV+BDrwIpD+wWSdwiSGpEqG09RCgiFBGKCEWE2iCQ20MToSibUzY3DmbdFAxCQSgIBaHkTQ/XoaRqOjQUGgoNhYZCQ6Ghrt/fyq0hiVDT3OLqEVePBi2k1p/Czn3M4WpiN0RBKAgFoXYQ4H2oNSHcu22potj1aGo9cxUBSPm6SLt48Ar8nvebDxBq2MDmIngq/qR8PQRjPYSb06sIkrqhanz3+eYy4NrWk4o/hIJQHQRCDSK1qgahSPk65z7KoFyDyaVpiFDclJiq+FHlo8pHlY8qH2/sqojLG7tpRSqqfFT5Bm9GuCnxXEUSihJrBBRjQz1irIdVmkppnNQNVePXZsC1rScV/9Cijtov1T4235iOQkOhodBQaCg0VGyEzxUhcmckoSmn219FINVOhIo898q1QbWlWLWtJxehc+0XhOrd3XMNRnn0XBvkrsedL1Uz1rYeCEVRonPQ7Hq0XASGUMMHya5DUvul2kn5SPk6DoAI1TUIFw9V1abKJ86pcnk8d8Pc+YhQRKigFMkNudw2D3ulPbQKNxfB0VBoqCAHQYSKS7FCCe32Vw5btaOh0FBoqCsEVFHIbYdQEApCQaj/WaBEuGpXITw1h1fjk/KR8g3/1eae5agyYqgIDg25FCUoSrQmyeXYyBTMJZAbERSBc4lcdz3ufKkRubb1pGYIEApCdRAINQgIxTlUUJk5VJOkGliqhwxdb+p8qc9LhIrTdEri9Pd185n3oXgfatA2ak25QyO8coCqnbJ5ZIrpahp3A3JpNiIUKR8pn3EO4hIYQkEoCAWhtv6ilIZzHZLKKFQ7KR8pX8ehlTLo3OeOLkHQUJEGXqsodj0aGuoaqVKEdgmo9ku1E6EiCZxrg0oZUGxEqG09Ywbs4k+EijRwItTwVSOXIKEEDDXo0PFzR2x3vSoCqXYiVCSBc22Qa/DufFT5qPJR5aPKR5Wv7zGVB1XtKsS77cpDuxFBzZfredz1uPOp53dTllzPn7oeNNQaAXW3KXdOjYZCQw1VCSlKRGoaCAWhIFTAuYNKQSAUhIJQEKrYQWZsSl2bpkNDoaGCqpa1GXBt64FQEApC7RwDUOWbrofzgiEvGA5aSK0aliofVb4OAqEGkRoRSPm6BujioY6JxuIUEYoIRYTaQWDMgamLD5t2CAWhIBSE4m/sxp7j5aqyxZbxc83vXt1SV7NUO7fNIzVbrg1yc3R3PjQUt82Dysyuh3CrTmq8VA+pxodQcUWAUAfj9lf7pdqJUESojkOrjeCpDi20SqoIo9ohFISCUFcIuBoTQq2rcv9KFLsboDbUTVnQUGgoNJThISHUNQKhKVxof+UAVTspHykfKZ/h0FQGUfymRJ/JfAYBELiJgH1TAvBAAAQ0AhBKY0QPELARgFA2VHQEAY0AhNIY0QMEbAQglA0VHUFAIwChNEb0AAEbAQhlQ0VHENAIQCiNET1AwEYAQtlQeR1//PjRPHr0SHb+/v178/Dhw1W/sVP7tm23X/v5z58/zZs3b5qPHz82v379Wn3/yZMnzfPnz7fjxaxBLpgOFgIQyoLJ7xRjzC6hfv/+3Tx48KC5vLwcXNDm3lnMGvwnpOcUAhCqsH0cHx83r169uhFpdqdtCXVwcNB8/vx5cjVHR0fN27dvm2fPnjUvX75s7t27t+r/6dOn5vT0dPT7zhoKw7CY4SFU4a12jNkl1OHhYfPly5dJcg49jrOGwjAsZngIVXirHWN2CbWJUK1mOjs7a+7evWut3lmDNRCdJAIQSkKU1sEx5ikNtfs+TluQaKPUz58/mzt37qxSv6dPn25Tv7GVOmtIe0q+vUEAQhW2BceYXUK1S21J9e7du+b169fb4kRfU/UfyVlDYRgWMzyEKrzVjjG7KV9/qR8+fGjev3+/0lVtxPr27Vtz//79G0/krKEwDIsZHkIV3mrHmGMJtVn6Zo5WW7UkI0IV3tSJ4SFUYeznIFT7CFOkdNZQGIbFDA+hCm+1Y8xuhGoLEi9evGj29/e3Fb72sPfk5GR7PnV+fk6EKrynU8NDqMLgu4QaW4Z7RanVUG31b3PYuzues4bCMCxmeAhVeKsdY3avHrVXii4uLpqvX79u7/G1V5EeP348WT531lAYhsUMD6EWs9U86BwIQKg5UGaOxSAAoRaz1TzoHAhAqDlQZo7FIAChFrPVPOgcCECoOVBmjsUgAKEWs9U86BwIQKg5UGaOxSAAoRaz1TzoHAhAqDlQZo7FIPAfrmuSkSCDT2gAAAAASUVORK5CYII=">

@ngoclong19
Copy link

I cannot re-procedure this issue. Could you check again?

@sjvudp
Copy link
Author

sjvudp commented Dec 14, 2023

Could not reproduce with Firefox 115.5.0esr (64-Bit) on Linux, but original platform was Windows with a slightly older version of Firefox. I try to reproduce on the original platform (which I cannot access right now).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants