Атрибут SVG Text удваивается - HTML2CANVAS

Ответ 1

Вызывается проблемой в html2canvas, генерирующей текстовые элементы дважды.

Применить этот патч для исправления до тех пор, пока этот запрос на перенос не будет включен в версию html2canvas:

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

Ответ 2

Я не нашел чистого способа исправить это. Поэтому я придумал следующее, вам нужно будет настроить ваше приложение, но работает как прелесть.

// Replace each SVG text with normal text
$('text').each(function(){

    // Get the offset
    var offset = $(this).offset();

    // Create new text
    $(this).parents('[data-role="canvas"]').append('<p class="app-svg-text-replace" style="top: ' + offset.top + 'px; left: ' + parseInt(offset.left - parseInt((($(window).width() / 2) - 512))) + 'px;">' + $(this)[0].textContent + '</p>');

    // Remove the SVG text
    $(this)[0].textContent = '';

})

В основном просто заменяет любой элемент TEXT элементом P и контекстом текстов svg и позиционирует его на основе смещений TEXT. Просто создайте элементы P перед тегом body и сделайте их абсолютными. (Я помещаю их в divs внутри оболочки, поэтому есть -512 и т.д., Вы можете игнорировать это)

До:

После того, как:

Ответ 3

В зависимости от того, на что вы нацеливаетесь, вам больше не понадобится HTML2Canvas, чтобы нарисовать SVG на холсте.

По крайней мере, в Chrome теперь можно нарисовать этот SVG прямо на холсте. Используя ваш пример:

$(document).ready(function () {
    $('#export').on('click', function () {
        // TODO
        var can = document.getElementById('canvas1');
        var ctx = can.getContext('2d');
        var img = new Image();
        var svg = document.getElementById('aaa');
        var xml = (new XMLSerializer).serializeToString(svg);
        img.src = "data:image/svg+xml;charset=utf-8,"+xml;

        ctx.drawImage(img, 0, 0);

    });
});

http://jsfiddle.net/ncv56vwf/4/

В Firefox и IE11 может потребоваться немного больше работы, но это возможно. Вот пример, который работает в Chrome, Firefox и IE11:

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, 600, 600, 0, 0, 600, 600)
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg"

http://codepen.io/simonsarris/pen/rVOjby

Для работы в firefox SVG должен иметь свои атрибуты width и height.

Чтобы он работал в IE11, вы ДОЛЖНЫ использовать все аргументы для drawImage

Ответ 4

IDK то, что точно не работает, но я полагаю, что это библиотека HTML2Canvas. Станьте, когда я удаляю стиль стиля шрифта, все стало нормально:

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4"
 style="color:#333333;font-weight:normal;text-decoration:normal;
font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica,
 sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>

И эта работа идеальна:

<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="" y="25">Inventory</text>

лол

Ответ 5

вам нужно скачать шрифт. Вы можете использовать @import в своем css, как вы можете видеть в этой скрипке:
 http://jsfiddle.net/scraaappy/04wkvweo/ или @font-face (не тестировалось) или использовать шрифт google go, добавив < link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> в свой заголовок (Tangerine as образец, но любой шрифт, который вы хотите здесь: https://www.google.com/fonts/ (к сожалению, нет Lucida Grande)

@degr: Если вы просто удалите Lucida Grande, это будет работать, потому что другие указанные шрифты поддерживаются вашим браузером, в то время как Lucida Grande - нет (это относится к Google Chrome на окнах). Html2canvas может работать только с вашим шрифтом по умолчанию, в противном случае вы должны скачать их. Вот почему он работает, если вы не указали какой-либо шрифт, или если вы указали только шрифты, поддерживаемые вашим браузером.

Чтобы увидеть шрифты, поддерживаемые вашим браузером, просто настройте параметры и где-нибудь по умолчанию шрифты и кодировку, у вас есть список, содержащий список всех поддерживаемых шрифтов, которые позволяют выбрать шрифт по умолчанию, который вы хотите отобразить (или вы можете играйте с javascript, как он предложил здесь: список всех шрифтов, отображаемых браузером пользователя) Все перечисленные шрифты будут работать. Если нет, вам нужно использовать трюк выше

Ответ 6

Я нашел в основном шрифт Unicode (Lucida Sans Unicode), который неправильно работает с HTML2Canvas в хроме, а другая поддерживается шрифтом-размером для этого небольшая, меньшая, большая, большая и т.д.... хотя эта информация не решает вашу текущую проблему, но если вы можете заменить эти вещи, вы можете избежать этой проблемы.

Ответ 7

Проблема заключается в том, что HTML2Canvas не поддерживает файлы svg должным образом (подробнее здесь https://github.com/niklasvh/html2canvas/issues/95).

Альтернатива, которую вы можете сделать, если вам все еще нужен HTML2Canvas, это сначала преобразовать SVG в Canvas (это может сделать canvg.js), а затем использовать HTML2Canvas, а затем вернуть его обратно. Пример кода, который делает это, можно найти по ссылке выше.