Скриншот casper js не работает с масками svg

Я создаю визуализации с помощью d3, которые используют маски svg, и я пытаюсь сделать снимок экрана с помощью casper js. Обычно это работает нормально, за исключением того, что маска не отображается должным образом; он показывает все слои, а не только тот, который маскируется. Это код каспера:

var casper = require('casper').create();

casper.start('http://localhost:3000', function() {
    this.captureSelector('bicycles.png', 'svg');
});

casper.run();

У кого-нибудь еще есть проблемы с этим?

Спасибо, Том


person Tom Stove    schedule 20.06.2013    source источник
comment
Правильно ли отображаются SVG в других браузерах WebKit? (Каспер использует PhantomJS, основанный на webKit)   -  person GarethOwen    schedule 25.06.2013
comment
Привет @GarethOwen, он отлично отображается в браузерах webkit, но при использовании casperjs и phantomjs маска не отображается должным образом. Интригующий...   -  person Tom Stove    schedule 01.07.2013
comment
селектор 'svg' должен быть идентификатором дома. Правильно? как '#svg'   -  person Gihan De Silva    schedule 01.08.2013


Ответы (1)


Я не знаю, поможет ли это, но в своих тестах я всегда устанавливаю размер области просмотра, а затем добавляю задержку перед запуском любого другого кода. Одна из причин задержки заключается в том, что мы используем нокаут, а элементы DOM не были полностью созданы к моменту вызова функции «старт».

Таким образом, ваш тест будет выглядеть так:

var casper = require('casper').create();

casper.start('http://localhost:3000', function () {
    casper.viewport(1024, 768);
});

casper.wait(1000); // Wait for knockout bindings and animations...

casper.then(function () {
    this.captureSelector('bicycles.png', 'svg');
});

casper.run();

Возможно, вам это не поможет, но стоит попробовать?

person GarethOwen    schedule 02.07.2013
comment
Спасибо @GarethOwen, не совсем сработало, так как маска svg отображается неправильно. Это может быть ошибка в PhantomJS, но я пока не совсем уверен. Спасибо, что нашли время дать ответ :) - person Tom Stove; 22.07.2013