This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Mozilla Support में खोजें

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Extracted svg figure is different with which show in orginal html file

  • 2 प्रत्युत्तर
  • 1 यह समस्या है
  • 3 views
  • के द्वारा अंतिम प्रतियुतर xiestcn

xiestcn
xiestcn
more options

I have a local HTML file which executes some js functions to draw svg figure. The browser rendered the HTML well, and then I extracted the svg conent from console using console.log(document.getElementsByTagName('svg')[0].outerHTML) and save as "t.svg". I found there was a slight difference between figure in "t.svg" and the orignal HMTL rendered by browser. But when I redid these in chrome and ms edge, the "t.svg" and the HTML were exactly same.

I have a local HTML file which executes some js functions to draw svg figure. The browser rendered the HTML well, and then I extracted the svg conent from console using console.log(document.getElementsByTagName('svg')[0].outerHTML) and save as "t.svg". I found there was a slight difference between figure in "t.svg" and the orignal HMTL rendered by browser. But when I redid these in chrome and ms edge, the "t.svg" and the HTML were exactly same.
संलग्न स्क्रीनशॉट

All Replies (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

The second screenshot shows a bit zoomed with only the text being zoomed and not their containers causing content to overlap.

You may have accidentally zoomed webpage(s). Reset the page zoom on pages that cause problems.

  • View -> Zoom -> Reset (Ctrl+0/Command+0 (zero))

Also make sure you aren't using "Zoom text only"

  • Settings -> General -> Language and Appearance -> Zoom
xiestcn
xiestcn प्रश्नकर्ता
more options

cor-el said

Thanks for your reply!

The problem is not caused by Zoom setting. It's probably caused by Font family. The text's font family set in svg is not exists in my Win10 laptop. As I extracted the svg from console, the browser may compute the text box width use "Times new roman"(default font family set in firefox), and the rendered svg displayed the text in other Font family which is wider than "Times new roman" in same font size. I fixed the problem by changing the font family to "Microsoft YaHei".

But the problem is still there with default font family setting. Could Firefox do this by default without modify the settings (or may be in future version?), as the HTML can be rendered correctly by default.