I am trying to take a screenshot of an svg element, but am only getting a partial picture. What am I doing wrong ?

'use strict';

const puppeteer = require('puppeteer');

(async () => {
       const browser = await puppeteer.launch();

       try {
           const page = await browser.newPage();
           await page.goto('https://jisho.org/search/家 #kanji');

           const selector = '#result_area > div > div:nth-child(2) > div.small-12.large-10.columns > div > div > div > svg';
           await page.waitForSelector(selector);
           const element = await page.$(selector); 

           await element.screenshot({
               path: 'example.png',            
           });
       } catch (e) {
           console.log(e)
       } finally {
           await browser.close();
       }
})();

CodePudding user response：

If it were me, I'd just save the SVG directly rather than converting it to a PNG. This preserves the scalability and raw data without quality loss and you can always convert to PNG later.

But if you really want a PNG only and you want a pure Puppeteer solution, the issue is that overflow-x: hidden CSS is on the parent container of the SVG, and the overall page layout makes it fussy to screenshot.

So I'd just rip out all of the page HTML except for the one element you're interested in. This makes it much easier to capture.

const puppeteer = require("puppeteer"); // ^16.2.0

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  const url = "https://jisho.org/search/家 #kanji";
  await page.goto(url, {waitUntil: "domcontentloaded"});
  const sel = ".stroke_order_diagram--outer_container svg";
  const el = await page.waitForSelector(sel);
  const svg = await el.evaluateHandle(el => {
    document.body.innerHTML = el.outerHTML;
    return document.querySelector("svg");
  });
  await svg.screenshot({path: "example.png"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;