-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
Comments
I cannot re-procedure this issue. Could you check again? |
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
Following the example shown in https://lindell.me/JsBarcode/ I used code like this to create a CODE39 barcode:
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,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">
The text was updated successfully, but these errors were encountered: